Как создать удобный интерфейс
Удобное приложение, в первую очередь, должно быть понятным, где сразу ясно какие кнопки нажимать и на какие иконки «тыкать». Интерфейс — это набор определенных правил и принципы их функционирования. На основе книги Ильи Бирмана собрали несколько рекомендаций, как сделать внешний вид приложения или сайта user-friendly
Помним: «привычка свыше нам дана»
Когда мы только учимся ездить на велосипеде, любое движение и каждый поворот педалей требуют полной концентрации. Когда навык приобретен, мы катаемся, и уже не задумываемся над тем, в какую сторону повернуть руль. При пользовании приложением наш мозг работает также. Как только мы привыкли отвечать на сообщение в ВК, смахивая его влево, то стараемся во всех социальных сетях пользоваться этим же приемом. Это стоит учитывать, как вы разрабатываете новую версию приложения — старым пользователям должно быть комфортно. Бирман также советует отказываться от кучи уведомлений, которые блокируют «рабочий» режим. Это раздражает, отвлекая внимание на ненужное поле и лишнюю информацию.
Даём право на ошибку
Раз уж мы затронули тему уведомлений, скажем еще об одном важном аспекте — пользователи имеют право на ошибку, но приложение не имеет права расстроить их. Заложите достаточно резервного времени на отмену действий: настройте сохранение файла в корзине на пару дней, включите показ немодального уведомления (т.е. не мешающего вам работать дальше) или покажите историю поиска.
Делаем одинаково для неодинаковых платформ
Разработка сайта или приложения часто включает работу с разными платформами и системами программного обеспечения. Для мобильной, планшетной и компьютерной версий, для Android и IOS нужно создавать если не полный интерфейс с нуля, то отдельно продумывать расположение некоторых объектов и функционал. Удобное приложение или удобный сайт устроены так, что при смене ПО или гаджета пользователь не испытывает стресса, привыкая к новым раскладкам.
Играем в сценариста-физика
В окружающем мире все действует по законам физики: берем яблоко, разжимаем пальцы — яблоко падает вниз. При разработке приложения тоже стоит создавать определенную физику или писать последовательный сценарий. Пользователь должен понимать, с помощью каких жестов и какую функцию он открывает, откуда «вылезает» картинка и куда «уплывает» сообщение. Не всегда он хочет идти по тому пути нажатий и кликов, который планирует разработчик. Чтобы проверить простоту и логику, попробуйте сформулировать сценарий в нескольких предложениях, как это делает Бирман:
«Есть домашний экран с иконками приложений. Нажатие на иконку запускает приложение, причём приложение «вырастает» прямо из иконки; фактически, она и есть приложение. Нажатие круглой кнопки возвращает на домашний экран»
Учитываем законы восприятия пространства
Человеческий мозг устроен так, что предметы, находящиеся рядом, мы воспринимаем как связанные между собой. Например, две линии, проходящие параллельно и на небольшом расстоянии, мы видим как столбик.
Фотографию первой новости и заголовок второй мы видим как одно новостное сообщение, если между ними небольшое расстояние. Заголовок «Нападение» никак не связан с «Путиным», но близкое расстояние между объектами связывает два события в одно.
Здесь непонятно, к какой паре джинсов какая цена относится.
Таких соединений лучше не допускать, чтобы не сбивать читателей и клиентов с толку.
Соблюдайте базовые правила
Большинство приложений, которыми мы пользуемся, написаны и сверстаны хорошо, поэтому мы не замечаем тех деталей, которые делают их удобными. Глаз пользователя не должен нервно дергаться, когда он смотрит на экран. Автор книги дополняет свои советы еще несколькими элементарными правилами, которые помогают не допустить раздражение пользователя:
Любой экран имеет значение. Даже первый, когда ничего еще не загружено, должен быть заполнен. Представьте, что вы только что зарегистрировались на Facebook, друзей еще не добавили, сообщения не написали, и поэтому все поля просто пустуют. Есть риск, что пользователь не разберется в приложении и перестанет к нему обращаться.
Убираем лишние элементы. Допустим, вы создаете онлайн-магазин для садоводов и в меню справа прописываете ссылки на разделы. Вариант, где даны отдельные ссылки на «Удобрения для вишни», «Удобрения для смородины» и «Удобрения для малины», только затруднит внимание потенциального клиента. Лучше оставить «Удобрения» как название для раздела, а «Вишню», «Смородину» и «Малину» отправить в подраздел.
Отделяем опасные кнопки. Нет человека, который ни разу не удалял бы случайно 3 главы диплома или фотографию расписания занятий. Часто такое происходит из-за того, что люди просто путают рядом стоящие кнопки «Save» и «Delete». Если оставить между ними большее расстояние, то риски удалить что-то нужное снизятся.
Не повторяем ритм на соседних этажах. Подзаголовки должны быть менее яркими, чем заголовки, названия разделов — отличаться от подразделов. Если все написано одинаковым шрифтом, на одинаковом фоне, одинаковой крупностью и одинаково подчеркнуто, глаза пользователя разбегутся. И сойдутся, когда он закроет страницу вашего сайта навсегда.
Один объект — одна цель. Картинка на обложке и новость представляют собой один материал, поэтому к нему должна вести одна и та же ссылка — и с фото, и с заголовка. Рядом с логотипом компании, к которому вы прикрепляете ссылку на главную страницу, не нужно делать плашку «Домой», прикрепляя к ней ту же ссылку на первый экран. Многоходовочки могут навредить вам.
Автор: Анна Опыхтина