Будучи дизайнером интерфейсов, до сих пор часто вижу ситуацию, когда проектировать интерфейсы приходится разработчикам или кому-то еще из команды.
Конечно, лучше, когда дизайнер в команде есть, но что делать, если его нет?
Когда-то я собрала набор простых правил, которые помогают избежать 80% самых распространенных ошибок, касающихся построения интерфейсов. Решила расшарить их для хабрасообщества.
Кому интересно — добро пожаловать под кат.
Сразу скажу, что нижеследующее хорошо помогает в простых случаях, но всего этого явно недостаточно, если речь идет о сложном UI-нагруженном масс-маркет проекте.
Цель статьи – скорее обозначить самые важные области, о которых следует помнить, нежели дать глубокую информацию по каждой из них.
1. Самое важное
Как этим будут пользоваться? Это самое важное, что нужно понимать.
Мне нравится определение Джефа Раскина (дизайнера, работавшего в тч над легендарным Apple II и написавшего культовую среди дизайнеров книжку “Интерфейс”), что интерфейс — это способ взаимодействия с продуктом.
То есть — это не внешняя красота в первую очередь, надо четко представить себе, как вашим продуктом будут пользоваться.
Теперь расставьте приоритеты.
Выделите 1-2 основные функции и кейса использования и сфокусируйте на них усилия. Если недопилили что-то второстепенное — пользователи с большей вероятностью это простят.
2. Делайте основные функции как можно доступнее и прячьте редкие функции
Согласитесь, проще разобраться в Google Docs, чем в MS Office?
Да, гугл-докс покрывает меньше кейсов, но это 90% самых распространенных кейсов. Да, в 10 случаях из 100 придется заморочится офисом, но в 90 случаях люди будут куда более счастливы. А кому-то эти редкие функции вообше никогда не понадобятся.
Кому нужны редкие функции — и так до них доберутся.
3. Убирайте лишние клики
Чем меньше действий для достижения цели — тем, как правило, лучше. Сделайте список из радиобаттонов вместо комбобокса (если позволяет место), это сократит один клик.
Например, автоматически определяя местоположение пользователя, вы избавляете его от необходимости тратить время на ручной ввод места.
Чем меньше элементов — тем проще изучить, как приложение работает.
Поэтому выбросьте все, что можно, не заставляйте пользователя изучать лишнее.
4. Формы. ошибки, обратная связь
Из всех best practice самые важные — для форм, обработки ошибок и обратной связи.
Разного рода формы — один из основных способов передачи информации от пользователя к вам. Регистрация, заказы, сообщения — это все формы.
Сделать хорошую форму – это обширная и отдельная тема, и я не хотела бы сейчас в нее уходить. Люк Вроблевски (Luc Wroblevski) написал об этом отдельную книгу.
Изучите, какие в вашем интерфейсе формы и важны ли они. Если важны — придется углубляться в вопрос
Людям свойственно ошибаться. Сделайте так, чтобы ошибку было легко исправить.
Если исправить ее нельзя, хотя бы предупреждайте об этом с помощью специального сообщения.
Как именно делать отмену — отдельный вопрос, и тянет на полноценную тему для отдельной статьи. Дизайнер Алан Купер, например, перечисляет 9 разных способов.
Самое главное — предусмотрите эту возможность в принципе.
Обратная связь при совершении каких-либо действий – еще один важный момент, очень сильно влияющий нга восприятие приложения в целом. Если пользователь что-то добавил, отправил, удалил, изменил – сообщите ему об этом. Иначе он будет по сто раз совершать одно и то же действие и недоумевать, почему ничего не происходит.
Если данные долго грузятся – повесьте лоадинг, так ваше приложение будет казаться менее тормознутым.
5. Держите важную информацию на виду
Это 1) саммари или корзина
2) быстрый выход в меню и другие части системы,
3) поиск
Удобно это делать панелькой в верхней части интерфейса и замораживать ее при скролле.
Этот прием используют почти все – от Apple и Google, до любого сервиса, который делает кнопку «Выйти» в правом верхнем углу.
7. Запоминайте все, что пользователь ввел
Во-первых, это сэкономит ему время.
Во-вторых, часто позволяет сократить число кликов (например, запоминание местоположения, личных данных, регулярных покупок)
В-третьих, даст вам ценную информацию для анализа.
Отличным примером здесь служит опять-таки сервис Google Drive. Мгновенное автосохранение документов позволяет вообще не думать о том, что данные надо сохранять.
Или еще хороший пример – Amazon. Амазон постоянно накапливает информацию обо всех действиях (не только покупках) — что вы смотрели, куда ходили и т.д. Это позволяет создать отличную систему рекомендаций, при которой легко доступными оказываются именно те товары, которые вам интересны – «с этим товаром часто покупают» и пр.
Эта статья не касается многих вопросов — специфики е-коммерса, энтерпрайза, web vs mobile, mobile vs планшет, форм, авторизаций, обработки ошибок, а также вопросов, связанных с построением процесса (это уже в случае, когда дизайнер на проекте есть). Если что-то из этого сообществу интересно, то дайте знать.
Приятной работы над проектами :)
Автор: mg1
