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