Empatika Design Hours Friday Edition


Автор:

На уже традиционном для нас внутреннем обучении “Empatika Design Hours” мы познали много нового и неизвестного, унесли с собой много инсайтов и приберегли пищу для размышлений.

В “пятничной версии” мы не только разбираем приложение, но и смотрим на текущие тренды мобильного дизайна, изучаем основы проектирования интерфейсов и пытаемся понять принципы дизайна в целом.

Мой пост будет построен в стиле комментариев к слайдам. В реальности, конечно, я все это рассказывал, затем мы обсуждали всей командой и делали какие-то выводы, которыми я тоже с вами поделюсь.


Тренды. Первый тренд – центральная кнопка на TabBar. Раньше ее не было по одной простой причине – стандартный компонент в iOS (например, в приложении “App Store”) не содержит в себе какую-либо кнопку. Кто-то (по нашему мнению тот самый Instagram) придумал поместить туда “самую главную кнопку”, и теперь это стало трендом. Что туда размещать – решать вам, но это должен быть основной use-case, иными словами то, чем будут пользоваться постоянно. Для Foursquare это “Check-in”, для Instagram – “Share”.

Второй тренд – реалистичность интерфейса. Об этом написано в Apple Human Interface Guidelines, однако далеко не все следуют этому принципу. Интерфейс вашего приложения должен представлять собой часть реального мира. Если у вас приложение для учета денежных затрат, то это может быть, например, отделанный кожей бумажник. В данном примере: выбор статусов магазинов для отображения находится в вывеске, прекрепленной к натянутому навесу. В примерах с иконками также прослеживается явная связь с реальным миром. Иконки становятся более проработанными и детальными, что добавляет им особенный шарм и простое желание “иметь у себя на экране такую красивую иконку”, ведь место на экране пользователя еще нужно заслужить, известно, что не каждое приложение достойно первого экрана (который, кстати, самый частоиспользуемый, что неудивительно) и многое зависит именно от иконки.

Скругленные углы. На самом деле все просто: скругленный предмет воспринимается нашим мозгом намного проще, чем острый. А чем сложнее нам воспринимать объект, тем неприятнее он нам кажется, вместе с тем больше внимания он привлекает. С дества мы привыкли, что круглое – безопасное, а острое – опасное, это теперь можно легко переложить на дизайн. Округлые кнопки и формы вообще воспринимаются проще и отлично подходят для “ненапряжных приложений”. Если же у вас серьезное приложение, требующего тотальной концентрации внимания пользователя на том, что он делает – стоит заострить края у элементов интерфейса. Это же относится и к ПРОПИСНЫМ и строчным буквам. Строчные – воспринимаются проще и легче, а прописные – привлекают внимание пользователя и делают акцент на серьезности контента. В ходе дискуссии мы вывели рецепт самой простой и самой серьезной кнопок. Самая простая – зеленая кнопка со скругленными краями, серьезная – красная кнопка с заостренными краями и прописными буквами внутри.

Windows 8 vs. Mac OS X. На самом деле, всю суть можно изложить одной картинкой:

Также очень рекоммендуется к прочтению статья http://osxdaily.com/2011/08/30/windows-8-vs-mac-os-x-and-ios/ в которой автор подробно описывает интерфейсы каждой из сторон и приводит аргументы в пользу Mac OS X.

У нас в команде началась длинная дискуссия на тему, что же лучше – иметь все функциональные возможности, или заточить конкретное приложение под один единственный use-case. Все остались при своем мнении :) От себя скажу: программа для просмотра и открытия файлов, должная быть программной для просмотра и открытия файлов, а если пользователю не достаточно предоставленного функционала – существует сформированный рынок специализированных программ, предназначенных для управления файлами. Мне кажется, не нужно давать обычным пользователям утилиту (заметьте, не “программу”) для расширенного управления файлами, потому что далеко не многие из них нуждаются в ней.

Ну и по поводу Гомера: по мнению автора, действия Microsoft в отношении интерфейса Windows Explorer сравнимы с тем, как Гомер изобрел машину :)

Также рекоммендуется к прочтению пост из блога MSDN (разработчики Windows) http://blogs.msdn.com/b/b8/archive/2011/08/26/improvements-in-windows-explorer.aspx про то, как они анализировали самые используемые функции Windows Explorer, и на основе этих анализов разработали новый интерфейс  (и как это они сделали такое заключение? :) ).

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

В приложении PayMeBack (служит для учета долгов) пользователю предлагается заполнить всего три поля: кто вам должен (либо кому вы должны), сколько и произвольный комментарий. Информацию предлагается ввести последовательно поле за полем на отдельных экранах, причем начиная именно с людей (почему?). Мне понравился именно подход к заполнению полей -  мы концентрируем внимание пользователя только на одном поле и на одном значении, убирая “раздражители” и пресекая сомнения. Однако, такой подход неприменим, например, при добавлении контакта, ведь вы не можете наверняка знать, какой именно информацией о человеке пользователь обладает, ведь он может знать только e-mail, или только телефон (иногда даже без имени).

Плюс, в PayMeBack интерфейс отделан простроченной кожей, что приятно на вид и “ощупь”.

Кстати, несколько полезных ссылок содержится в конце презентации.

Спасибо дочитавшим до конца :)

 


Отзывы

Оставьте отзыв первым!

Оставить отзыв

WordPress Themes