Веб-дизайн *

Всем привет! Меня зовут Павел и Junior UX/UI дизайнер. В активном поиске работы на данную позицию. В данном лонгриде, хочу поделиться с вами тестовым заданием, которое я выполнял для одной Digital компании.

Задача:

1) Оценить юзабилити сайта mnogomebeli.com и дать экспертное заключение.

2) Провести редизайн страницы товара.

Решение:

Перед оценкой юзабилити сайта, было проведено исследование по аудитории: в частности возрастная группа, чтобы примерно понимать ЦА. Данные взяты на основе официальной страницы компании в ВКонтакте. Всего 325 654 тыс. человек (данные на 16.12.2022).

Каждый день мы пользуемся десятками различных мобильных приложений и посещаем десятки, если не сотни, всевозможных сайтов. Часто при этом мы сталкиваемся с какими-то их неприятными особенностями — что-то сделано недостаточно продуманно, где-то разработчик запилил фичу спустя рукава. И всё бы ничего, но некоторые из этих моментов по-настоящему вездесущи, встречаются ежедневно и неимоверно раздражают.

В этой статье я попытался перечислить некоторые из таких наиболее распространённых косяков. Если вы отвечаете за разработку/дизайн/менеджмент какого-либо сайта или приложения, пожалуйста, никогда так не делайте. Правда, ну сколько можно...

Раньше веб был более странным местом

В предыдущей статье я подробно разобрал проблемы связанные со шрифтами для темной темы и причины их актуальности. В данном материале смотрим на то, какие есть решения и что предлагает индустрия. + figma файл с адаптированным мной под темную тему стандартным текстовым набором стилей Material Design для Roboto.

Я обожаю темные интерфейсы: в по для кодинга и работы с графикой. То есть там, где текст не нужно читать, а только считывать знакомые иконки и слова. А вот темная тема — шрифтовой ад, в котором нарушен базовый принцип типографики — контрастность. Увы, но сегодня не существует ни одного шрифта и алгоритма растеризации для темной темы для создания полноценных интерфейсов. И вот почему.

Изучив оба стандарта: IBM VGA и EXIF, написав пару публикаций по теме, у меня все равно ушло два дня, чтобы понять, откуда берется «полу-пиксель». И речь не о рендеринге сложных форм типа литер шрифта или иконок, а о стандартных ректанглах формата 100x100. Который по логике должен масштабироваться хорошо. Однако.

Всем привет, мы дизайнеры студии Focus. Во второй части статьи мы рассказывали, как проводили тестирование и готовились к нему. А также, как провели небольшое исследование конкурентов. В заключительной части мы покажем обновленный дизайн приложения по доработанному сценарию.

Меня зовут Александра, я дизайнер из Ozon в SX — Seller Experience. Сегодня расскажу продуктовую историю о таблицах и дизайн-долге.

Иногда приходится работать с устаревшими системами, при этом ресурсов на улучшение нет, и поэтому новые доработки внедряются с минимальными изменениями. Каждая новая функциональность всё больше и больше усложняет систему, делая её сложной для использования, а новым сотрудникам тяжело вникать в проект (да, легаси бывает не только у разработчиков). 

Так было и с нашим продуктом, который накопил много недочётов. Работа без компонентов усложняла внедрение нового как со стороны дизайна, так и со стороны фронтенда. От неконсистентности страдали и пользователи. Особенно плохи были дела с таблицами. Настолько, что пользователи вручную увеличивали страницу, чтобы найти горизонтальный скролл. Нагруженные таблицы — вечная боль, и ресурсов на возврат дизайн-долга и техдолга, как всегда, нет — новые фичи сами себя не спроектируют. Под катом наша история решения большой задачи с низким приоритетом. 

Меня зовут Станислав Хрусталёв, я автор сайта hardclient.com. Работаю в управлении клиентским опытом с 2009 года. Пишу на эту тему, собираю лучшие практики из мира Customer Experience и оцениваю сервисные модели компаний.

Некоторое время назад я задался идеей: собрать базу лучших практик UX/UI в области электронной коммерции. Как сделать покупки в интернет-магазине максимально удобными для клиента? Чтобы он возвращался снова и рекомендовал вас друзьям и знакомым?

Время шло, и из небольшой статьи материал стал превращаться в крупнейшую (?) открытую русскоязычную базу с лучшими практиками UX/UI в сфере e-commerce.

Привет! Меня зовут Даниил Видишев, я продуктовый дизайнер в Inly.

Сегодня хочу поделиться рекомендациями, которые помогут не множить папку с дизайн-долгом и делать продукт, который выглядит и работает так, как задумывали.

Разбираемся с тем, как принести максимальную пользу команде дизайнеров с помощью подключаемой библиотеки компонентов в Figma, на примере нашей команды по нативной разработке мобильных приложений.

Как инициатива IT-направления помогла огромному телекому поменять культуру, запустить множество digital-продуктов, и стать современной цифровой компанией.

Функция сравнения товаров облегчает выбор клиентам интернет-магазинов во многих сферах. Но опыт ее использования сильно различается от компании к компании, и даже крупнейшие игроки допускают ошибки.

Что стоит учесть, чтобы спроектировать идеальный интерфейс сравнения? 156 гайдлайнов в этой статье.

Свое приложение есть уже у большинства крупных интернет-магазинов. На их сайтах мы можем встретить блоки с призывом к установке.

Но меня поразило: насколько много компаний относятся к этому вопросу спустя рукава. Для многих это точка роста.

В статье – ответы на вопрос о том, как этого роста достичь.

Форма подписки – первая точка контакта с клиентом на его пути к получению email-рассылок. И от того, насколько хорошо форма спроектирована, зависит, окажется он в нашей базе подписчиков или нет.

Сегодня разберем рецепт для идеальной формы подписки: 105 гайдлайнов с примерами.

Что мы чаще всего встречаем первым делом, зайдя на сайт интернет-магазина? Это слайдер с баннерами на главной странице. Как сделать его цепляющим, удобным? Что в нем стоит разместить?

В этой статье разберем 103 гайдлайна с примерами.

Новичок в веб-дизайне? Восхищаешься красивыми анимированными кейсами на Behance, но не знаешь, как сделать анимацию и добавить видео в свою презентацию? Тогда эта статья специально для тебя: я пошагово расскажу, что надо делать!

На встрече мы поговорили о разработке цифрового-продукта на разных этапах и уровнях: от управленческих задач и распределения фокусов по командам, работы с метриками эффективности до запуска конкретного предложения и дизайна.

После мероприятия мы решили собрать в одном тексте полезные материалы.

Привет, Хабр! Меня зовут Сергей Пестерев, в ispmanager я отвечаю за дизайн продукта. Пожалуй, сложно представить себе более холиварную зону ответственности. Стоит лишь заговорить о дизайне, как тут же оживляются пользователи, которым он якобы не нужен, — они требуют новых инструментов и функций. Иногда это приводит к тому, что продуктовая команда перестает уделять достаточно внимания улучшению UI — и тогда начинают бунтовать пользователи, которым дизайн важен.

Чтобы избежать этих «качелей», мы решили дать пользователями возможность самостоятельно решать, какие улучшения требуются продукту. Для этого у нас есть собственный roadmap. Там мы предлагаем программу развития продукта, а непосредственно пользователи путем голосования решают, что делать в первую очередь, а что может и потерпеть.

Итак, сегодня я хочу рассказать о том, как мы для ispmanager темную тему делали. Присаживайтесь поудобнее — несмотря на кажущуюся простоту, это была весьма объемная работа. А значит и история выйдет большая и занимательная. Поехали!

Сегодня мы снова убедимся в том, что даже простые элементы интерфейса – это целая вселенная, а опыт клиента зависит от множества деталей.

На этот раз мы разберем небольшой, но важный элемент, который есть практически на всех сайтах – контактный номер телефона. 80 гайдлайнов с примерами.