Будучи дизайнером интерфейсов, до сих пор часто вижу ситуацию, когда проектировать интерфейсы приходится разработчикам или кому-то еще из команды.
Конечно, лучше, когда дизайнер в команде есть, но что делать, если его нет?
Когда-то я собрала набор простых правил, которые помогают избежать 80% самых распространенных ошибок, касающихся построения интерфейсов. Решила расшарить их для хабрасообщества.
Кому интересно — добро пожаловать под кат.
Сразу скажу, что нижеследующее хорошо помогает в простых случаях, но всего этого явно недостаточно, если речь идет о сложном UI-нагруженном масс-маркет проекте.
Цель статьи – скорее обозначить самые важные области, о которых следует помнить, нежели дать глубокую информацию по каждой из них.
1. Самое важное
Как этим будут пользоваться? Это самое важное, что нужно понимать.
Мне нравится определение Джефа Раскина (дизайнера, работавшего в т.ч. над легендарным Apple II и написавшего культовую среди дизайнеров книжку “Интерфейс»), что интерфейс — это способ взаимодействия с продуктом.
02.Adobe Illustrator Как правильно настроить интерфейс программы,для комфортного взаимодействия.
То есть — это не внешняя красота в первую очередь, надо четко представить себе, как вашим продуктом будут пользоваться.
Теперь расставьте приоритеты.
Выделите 1-2 основные функции и кейса использования и сфокусируйте на них усилия. Если недопилили что-то второстепенное — пользователи с большей вероятностью это простят.
2. Делайте основные функции как можно доступнее и прячьте редкие функции
Согласитесь, проще разобраться в Google Docs, чем в MS Office?
Да, гугл-докс покрывает меньше кейсов, но это 90% самых распространенных кейсов. Да, в 10 случаях из 100 придется заморочится офисом, но в 90 случаях люди будут куда более счастливы. А кому-то эти редкие функции вообше никогда не понадобятся.
Кому нужны редкие функции — и так до них доберутся.
3. Убирайте лишние клики
Чем меньше действий для достижения цели — тем, как правило, лучше. Например, сделайте список из радиобаттонов вместо комбобокса (если позволяет место), это сократит один клик.
Или — автоматически определяя местоположение пользователя, вы избавляете его от необходимости тратить время на ручной ввод места.
Как только вы начнете думать над тем, что бы еще убрать, как найдете кучу мест, которые можно улучшить.
Чем меньше элементов — тем проще изучить, как приложение работает.
Поэтому выбросьте все, что можно, не заставляйте пользователя изучать лишнее.
4. Формы, ошибки, обратная связь
Из всех best practice самые важные — для форм, обработки ошибок и обратной связи.
Разного рода формы — один из основных способов передачи информации от пользователя к вам. Регистрация, заказы, сообщения — это все формы.
Сделать хорошую форму – это обширная и отдельная тема, обсуждение которой уведет нас сильно в сторону. Например, Люк Вроблевски (Luke Wroblevski) написал об этом отдельную книгу. Та собрана куча рекомендаций и интересных примеров.
ДЕЛАЕМ WINDOWS 10 КРАСИВЕЕ И УДОБНЕЕ | Топ ЛУЧШИХ программ и настроек для прокачки ПК
Изучите, какие в вашем интерфейсе формы и важны ли они. Если важны — то придется углубляться в вопрос.
Людям свойственно ошибаться. Сделайте так, чтобы ошибку было легко исправить.
Если исправить ее нельзя, хотя бы предупреждайте об этом с помощью специального сообщения.
Как именно делать отмену — отдельный вопрос, и тянет на полноценную тему для отдельной статьи. Дизайнер Алан Купер, например, перечисляет 9 разных способов.
Самое главное — предусмотрите эту возможность в принципе.
Обратная связь при совершении каких-либо действий – еще один важный момент, очень сильно влияющий на восприятие приложения в целом. Если пользователь что-то добавил, отправил, удалил, изменил – сообщите ему об этом. Иначе он будет по сто раз совершать одно и то же действие и недоумевать, почему ничего не происходит.
Если данные долго грузятся – повесьте лоадинг, так ваше приложение будет казаться менее тормознутым.
5. Держите важную информацию на виду
Что есть важная информация?
Та, которая сообщает о состоянии системы и позволяет быстро навигироваться по ней. Обычно это:
1) саммари или корзина
2) быстрый выход в меню и другие части системы,
3) поиск
Удобно это делать панелькой в верхней части интерфейса и замораживать ее при скролле.
Этот прием используют почти все – от Apple и Google, до любого сервиса, который делает кнопку «Выйти» в правом верхнем углу.
7. Запоминайте все, что пользователь ввел
Во-первых, это сэкономит ему время.
Во-вторых, часто позволяет сократить число кликов (например, запоминание местоположения, личных данных, регулярных покупок)
В-третьих, даст вам ценную информацию для анализа.
Отличным примером здесь служит опять-таки сервис Google Drive. Мгновенное автосохранение документов позволяет вообще не думать о том, что данные надо сохранять.
Или еще хороший пример – Amazon. Амазон постоянно накапливает информацию обо всех действиях (не только покупках) — что вы смотрели, куда ходили и т.д. Это позволяет создать отличную систему рекомендаций, при которой легко доступными оказываются именно те товары, которые вам интересны – «с этим товаром часто покупают» и пр.
Эта статья не касается многих вопросов — специфики е-коммерса, энтерпрайза, web vs mobile, mobile vs планшет, форм, авторизаций, обработки ошибок, а также вопросов, связанных с построением процесса (это уже в случае, когда дизайнер на проекте есть). Если что-то из этого сообществу интересно, то дайте знать.
А вот небольшой список книг, которые могут быть полезны для углубления в тематику.
Есть еще отличная книга Дженнифер Тидвелл «Разработка пользовательских интерфейсов», но она уже более специализированная.
Ну и главная, на мой взгляд, книжка про то, как создавать хорошие продукты, это биография Стива Джобса, автор Айзексон
Приятной работы над проектами 🙂
Источник: habr.com
Доработка интерфейса приложения
Во-первых, сделаем так, чтобы для кнопок панели инструментов появлялись подсказки. Выделите на панели инструментов кнопку «Вычислить» и в инспекторе объектов задайте ее свойству Hint значение «Вычислить», а свойству ShowHint – значение True. То же самое проделайте для остальных кнопок. Сохраните изменения в проекте.
Теперь сделаем возможным использование «горячих» клавиш при работе с меню. Задать «горячие» клавиши можно двумя способами:
- указать «горячую» букву в заголовке пункта меню. Для этого щелкните по компоненту-меню и в инспекторе объектов в каждом заголовке пункта меню перед нужной буквой поставьте значок
- выбрать для данного пункта меню свойство ShortCut и в нем в распахивающемся списке выбрать нужную комбинацию Ctrl+буква.
Задайте комбинации «горячих» клавиш для пунктов меню и сохраните изменения в проекте.
Последнее, что остается нам сделать, это задать последовательность перехода между элементами управления при нажатии клавиши TAB. Это стандартный прием в системе Windows.
Выделите все элементы управления на форме и в контекстном меню выберите пункт Tab Order (порядок обхода). С помощью кнопок со стрелками перегруппируйте список элементов в следующем порядке: Edit1, Edit2, Edit3, Button1 – и нажмите кнопку ОК. Сохраните изменения в проекте. После запуска программы станет активным поле ввода Edit1. Нажимая клавишу TAB, вы сможете последовательно обойти остальные поля ввода.
. Перемещаться по элементам управления в обратную сторону можно с помощью комбинации клавиш SHIFT+TAB.
Подготовка приложения к распространению
Как спроектировать интерфейс мобильного приложения
Как вы приступаете к созданию интерфейса? Насколько сильно вы ориентируетесь на web-интерфейсы? Помните о 5 самых важных аспектах проектирования UI для мобильных приложений.
1. Правила взаимодействия с пользователем не отменяются
Вспомним 4 ключевых правила интерактивного дизайна:
— Исследования
Отслеживайте поведения пользователей для корректировки работы приложения. Задайте пользователям цели и выявите препятствия на пути к их достижению.
— Учет пользовательских привычек и анатомических особенностей
Правильный интерфейс — не головоломка. В идеале пользователь не должен думать над тем, что нужно сделать, чтобы получить нужный результат, и не вынужден отгадывать, зачем нужен тот или иной элемент.
Помните, что у человека по пять пальцев на двух руках, и что со времен раннего html подчеркнутый текст синего цвета означает не что иное как ссылку.
— Возможность обучаться
Новое и непривычное в интерфейсе должно выглядеть и вести себя дружелюбно. Всегда оставляйте возможность отменить действие и вернуться назад. Тогда новые модели поведения можно будет легко изучить и принять.
— Обратная связь
Оповещайте пользователя о том, что его задача была выполнена: это может быть звуковой сигнал, небольшое модальное окно или всплывающее оповещение.2. Понимание пользователей
Есть пара тактик, позволяющих понять поведение пользователей и проектировать интерфейс с его учетом:
— Внедрение персонажей
Результатом небольшого брейнсторма становятся один или несколько персонажей, являющихся классическими представителями вашей аудитории. Этот метод очень подробно описывал А. Купер, и даже рекомендовал давать имя этим персонажам и придавать им личные характеристики, чтобы приблизить их к реальным людям.
Соответственно, вы проектируете интерфейс только для них, а не для абстрактного «пользователя».— Пользовательские сценарии
Написание сценариев поведения обеспечит понимание того, как человек будет действовать в приложении. Начните с цели, которую пользователь должен достичь и пропишите все его действия на пути к ней по пунктам. Опишите все существующие пути, начиная с наиболее очевидных. Так вы сможете отсечь лишнее или понять, как упростить этот путь.— Карта действий
Продумайте все возможные условия для каждого действия и поведение элементов. Это избавит вас от лишних или непредусмотренных функций, а также поможет понять эмоциональную составляющую использования вашего продукта.
3. План потоков
Просто набросайте ход действий пользователя на бумаге — от начала пути до момента достижения цели. Это должно дать понимание количества и сложности шагов между первым и последним действием.
Пример: банковское приложение. Сценарий: настройка пополнения депозитного счета.
Автоматическое пополнение депозита
[Установить]
Выберите частоту пополнения
[Раз в месяц] [Два раза в месяц] [Раз в несколько недель] [Каждую неделю]
Один раз в месяц
[Выберите дату]
Подтвердить
Введите сумму
[Введите сумму]
[Установить автоматическое пополнение счета]
4. Ориентация на поведенческие шаблоны, привычки и неписанные стандарты. Учет движений
Поведенческие шаблоны
Использование мобильных гаджетов вращается вокруг множества нюансов, которые нельзя не принимать во внимание — например, расположение большого пальца.По этой причине навигационные кнопки, как правило, находятся в нижней части экрана:
В книге «Шаблоны мобильных интерфейсов», выпущенной UXPin, рассматриваются два вида взаимодействия: жесты и анимация.
Пользователи уже привыкли к возможности использовать разные жесты для различных ситуаций:
И распространенные типы анимации также вызывают ряд ожиданий, основанных на предыдущих опытах взаимодействия с приложениями.
Посмотреть, какими они бывают можно на Capptivate и UseYourInterface.Учет движений
Анатомический фактор — очень важный элемент проектирования. Учитывайте строение тела человека и статистику использования мобильных устройств при проектировании. Левый верхний угол подходит для размещения важной информации, в то время как нижняя граница экрана — для навигации.
Именно так выглядят схемы наиболее удобных для человека жестов.
94% времени пользователи держат смартфон в вертикальном положении.
Почти половину времени пользователи проводят держа устройство правой рукой, и используя для работы с экраном только большой палец.
И большинство пользователей используют смартфоны с диагональю экрана в пределах 4-5,5 дюймов.
5. Использование итеративного подхода
Говоря просто, лучше всего начинать с малого функционала, анализируя его важность, необходимость и качество исполнения, постепенно дополняя нововведениями. Это не только ускорит запуск проекта, но и сократит риски. А главное — позволит избежать перегруженности интерфейса.
Бонус: web-помощники для проектировщика интерфейсов приложений
1. Как подобрать хорошо сочетающиеся цвета для мобильного приложения? Используйте эти сервисы:
getuicolors.com
www.coleure.com
bootflat.github.io/color-picker.html2. Изучите готовые примеры отличных интерфейсов, чтобы лучше понять необходимый уровень:
www.mobile-patterns.com/Тем, кто хочет разрабатывать под мобильные устройства, рекомендуем профессию «Разработчик мобильных приложений».
Источник: gb.ru