Хотите создать приложение?
Напишите нам — мы подскажем, как лучше всего реализовать вашу идею, ответим на вопрос о сроках и стоимости проекта.
Электронная почта
Ваше имя
Примерный бюджет
Описание проекта
Нажимая "Отправить заявку", вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности.
#Стандарт
Философия и практика дизайна приложений
Руководство для дизайнеров, проджектов, разработчиков. Опыт наших побед и ошибок
Хороший дизайн это:
Стилистическое единство

Интуитивность

Невозможность ошибиться

Открытость

Кое-что еще :)


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


Интуитивность
Достигается повторяемостью решений по всему проекту. Например кнопка «назад» на всех экранах расположена в левом верхнем углу и выглядит одинаково. Кнопка «закрыть» при этом применяется только для всплывающих экранов, чтобы не запутать пользователя. Пользователь в пределах приложения действует на автомате, как бы "угадывает", как должен повести себя даже неизвестный, новый экран. Это интуиция ему помогает.



Невозможность ошибиться
В японском языке есть термин "Poka Yoke", который на русский переводят как "принцип нулевой ошибки" или "защита от дурака". Вот только наш пользователь - не дурак! Просто у него нет времени и желания догадываться, какую модель поведения заложили в приложение дизайнер и программист. Так давайте сделаем для него приятную и удобную основную дорогу, чтобы он не плутал! Не будем наказывать его за неверные действия предупреждающими диалогами и грозными сообщениями об ошибках, а позволим "на лету" вернуться в нужное нам русло.

Забыл указать размер обуви при выборе товара и нажал «в корзину»? Не выводим сообщение об ошибке, а показываем диалог с выбором размера. (Всемайки) Автоматически устанавливаем фокус на первом поле при переходе на экран - так пользователь не будет чесать в затылке, не понимая, что ему со всем этим делать.

Важно проектировать интерфейс, держа в голове, что в нем активно используется клавиатура, занимающая в лучшем случае треть экрана, а в худшем - половину. Это значит, что важные кнопки нельзя размещать внизу.
Мощность
Хороший интерфейс одним элементом решает сразу несколько задач. Примеры:
Иконка профиля в Pinterest одновременно отображает фото пользователя (не нужно объяснять, что это профиль), кнопка фото в телеграме транслирует изображение с камеры

Кнопка личного кабинета в «Лабиринте» показывает размер скидки юзера

Превью товара в ЦУМе позволяет просматривать различные изображения товара,

Ценник на превью товара в Яндекс.Лавка при тапе быстро добавляет товар в корзину.

Кнопка "Добавить в корзину" превращается в кнопку "Перейти в корзину" после того, как товар добавили.


Процент скидки указан прямо в пункте меню "Мой Лаб"
Открытость
Не прячем "секретные" функции за свайпами и иконками с таинственными пиктограммами. Свайпы - только как дополнение, непонятную иконку дублируем текстом или вообще оставляем только текст.

Отзывчивость. Анимации и микроанимации, тактильный фидбэк. Приложение не скрывает от пользователя, чем оно занято.

Уважение к времени пользователя. При долгой загрузке покажите «скелетон», покажите оставшееся время до загрузки файла в облако, а ещё лучше - загружайте заранее, как это делает Инстаграм. Ещё до того, как пользователь нажал на кнопку. Используют так называемый оптимистичный подход. В конце концов, загрузку всегда можно отменить.

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

Копирайтинг. «Читать украдкой» в bookmate - кто-то же придумал так написать вместо «не показывать другим пользователям, что я читаю эту книгу». Гениально.

Близкое, но все же другое: юмор, ирония в некритичных местах. Пример - ракета с фото пользователей в старом приложении Рокетбанка.

Типографика. От выбора шрифта зависит настроение, а часто - читаемость. Считаю, что здесь нам предстоит много сделать. Достойных примеров не вижу.

Избегать или по крайней мере в разумных пределах использовать горизонтальный скролл. Некоторые юзеры не ждут его и мы можем столкнуться с ситуацией, что пользователь просто не догадается проскроллить вбок. Мы встретились с такой проблемой в первых релизах всемайки, где в карточке товара был горизонтальный скролл линейки доступных размеров. Некоторые думали, что XL, XXL в продаже просто нет!

Большие изображения в край экрана, большие кегли шрифтов. Дизайнеры для веба даже в мобильной версии мельчат - будем отличаться от них в лучшую сторону! Веб браузер боится залезать в верхнюю часть экрана - нам же ничего не мешает поставить (продлить) туда изображение Книги (Лабиринт)


Максимизируйте область нажатия. Глупо делать переход только на кнопке «перейти», если Можно обработать нажатие на весь баннер. Вообще, юзер ждёт что почти все элементы интерфейса кроме явных простыней текста будет живым, отзывчивым. Это отличает приложения от веба. Используйте это для увеличения функциональности.


Никаких дополнительных функций нельзя вещать на «долгое нажатие». Во-первых действие неочевидно (нет аффорданса) во вторых бесит ждать.

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

Изображение "упирается" в верхний край экрана. Браузер так не умеет!