- PVSM.RU - https://www.pvsm.ru -

Веб-дизайн / Баланс между дизайном и юзабилити в приложениях

Привет, с недавних пор я работаю в компании, которая занимается разработкой приложений и игр для мобильных устройств. Учитывая, что у меня довольно большой опыт работы дизайнером, я испытал некий шок, когда впервые начал работать над дизайном приложения. Еще пол года назад, спросив у меня, смогу ли я сделать дизайн для приложения, я бы не задумываясь ответил бы: «Да запросто». И попал бы в довольно неловкую ситуацию, потому что не все так просто, как это кажется на первый взгляд. Конечно, нарисовать кнопочки на каком то красивом фоне возможно и не составит труда, но в конечном итоге приложение не будет пользоваться популярностью у пользователей. В общем, давайте я на примерах постараюсь объяснить, что я имею ввиду.
Итак, самый большой подводный камень, который не видно в «мутной» воде дизайна — это эргономичность приложения. Эргономичность, кто забыл — это термин, который обозначает общую степень удобства при эксплуатации предмета, приложения и т.д. Кому не удобно использовать данный термин, всегда могут его заменить на «usability или если по русски — удобство использования» То есть, если ваше приложение будет красивым, но не удобным для пользователя — приложение популярным не будет. Ну и наоборот, конечно, если все удобно, но кубиками — результат тот же. Самое интересное, что это вроде все понимают, но найти этот баланс между дизайном и юзабилити не у всех получается. Итак, я нашел 7 приложений, в которых на мой взгляд можно увидеть этот баланс и взять себе на заметку. Я специально подобрал приложения из разных областей и созданных для разных устройств.

Итак, начнем.

Первое приложение которое мне нравится — это Shazam (iTunes Link [1])

Веб дизайн / Баланс между дизайном и юзабилити в приложениях

Оно отлично показывает, что я пытаюсь вам сказать. Функций у приложения очень много, но основная — это определение песни, которая играет. Открываешь приложение и нету вопросов, что нужно делать дальше. Тем более что написано же: Touch to Shazam. Нажимаешь и дальше приложение делает все за вас. Очень удобно. И что не мало важно — красиво. Все элементы смотрятся на своих местах.


Второе приложение я нашел в разделе финансы android маркета — Your Accountant Pro (Android Market Link [2])

Приложение немного сложнее по своей структуре чем Shazam, поэтому ему стоит уделить больше внимания.

Веб дизайн / Баланс между дизайном и юзабилити в приложениях

Итак, первое что мне очень нравится в этом приложении, что в нем ничего не спрятано в меню. Это очень показательно, потому что в подобных (финансовых и сложных на первый взгляд) приложениях многие функции спрятаны в меню, которое вызывается кнопками на корпусе телефона. В этом же приложение — все находится на экране. Некоторые функции приложения, которых не видно на первый взгляд, можно найти интуитивно. Например, просматривая отчеты — можно нажать на название месяца — и появится окно с выбором дат. Тем самым можно смотреть отчет за выбранный период времени, при этом на экране нет лишних кнопок. В общем, много деталей, которые очень приятны в использовании.

Кроме скрытых функций в этом приложении мне нравиться наличие вкладок. Они так же как и круговые элементы управления (о них чуть дальше) очень удобны в использовании. Они создают иллюзию, что приложение находится постоянно на главном экране и не нужно никуда переходить, что бы увидеть тот или иной экран.


Далее у нас идет приложение под названием Facebook (Itunes Link [3])

Кто бы сомневался, что крупнейшая социальная сеть сделает приложение на пять с плюсом? Думаю, что никто.

Веб дизайн / Баланс между дизайном и юзабилити в приложениях

Все очень просто, удобно и со вкусом. Шторки, которые отодвигаются и перекрываются друг другом. В общем все сделано на 5+.


Теперь об использовании круговых интерфейсов на примере Convertbot (Itunes link [4])

Веб дизайн / Баланс между дизайном и юзабилити в приложениях

Когда на экране места не слишком много, а нужно вместить много чего — отличным решением может стать использование круговые элементов управления. Пусть иконки на первый взгляд не понятны, но после второго запуска приложение все происходить просто и не принужденно. Почти интуитивно!


Следующее приложение, о котором я хочу поговорить я так же нашел на android маркете. Это Read It Later Pro (Android Market Link [5])

Веб дизайн / Баланс между дизайном и юзабилити в приложениях

Что сказать? Отличный дизайн, отлично подобраны цвета приложения (черный и желтый цвета очень гармонично смотрятся). Кроме того, приложение так же очень функционально и в то же время простое в использовании. Это в первую очередь обусловлено расположением элементов на экране и условным разбитием экрана на несколько смысловых частей. То есть, например, кнопки для прочтения сохраненных статей визуально отличаются и находятся отдельно от кнопок управления самим приложением.


All Recipes отлично демонстрирует силу иконок и то, как ими нужно пользоваться (iTunes Link [6])

Веб дизайн / Баланс между дизайном и юзабилити в приложениях

Очень круто и очень удобно. Как Вы видите, можно выбирать блюдо не только по ингредиентам, но и по времени, которое тратиться на приготовление. Это приложение очень хорошо показывает то, о чем я говорил в начале статьи. А именно, красивый дизайн, который делает приложение удобным и приятным в использовании. Минимум нажатий, минимум лишних переходов. Максимум внимания уделено именно блюдам и их приготовлению. Что касается дизайна? Как я уже писал выше — черный с желтым — отличное сочетание.

Пара ресурсов для подбора цветов: kuler.adobe.com [7] и ColourLovers [8]

Размеры иконок хорошо подобраны — их много влазит на экране, но они не кажутся слишком маленькими.


Ну и еще одно приложение для вашего внимания из android маркета — IMDb Movies & TV (Android Market Link [9])

Веб дизайн / Баланс между дизайном и юзабилити в приложениях

Поражает работа дизайнеров и маркетологов (ну и всех кто работал над этим приложением). Настолько функциональное приложение и безумно простое в использовании. А дизайн? Ничем не выделяющийся среди других дизайн приложения не вызывает никаких негативных эмоций. Разные функциональные экраны разного формата и образца (что на первый взгляд странно и не правильно), но это не вызывает никакого дискомфорта.


Если у Вас есть свои мысли на счет баланса между дизайном и юзабилити — пишите. Так же желательно подкреплять свои мысли и доводы примерами.

Автор: pavlushka


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/yuzabiliti/3115

Ссылки в тексте:

[1] iTunes Link: http://itunes.apple.com/us/app/shazam/id284993459

[2] Android Market Link: https://market.android.com/details?id=ua.accountant

[3] Itunes Link: http://itunes.apple.com/us/app/facebook/id284882215

[4] Itunes link: http://itunes.apple.com/app/convertbot-amazing-unit-converter/id308928075

[5] Android Market Link: https://market.android.com/details?id=com.ideashower.readitlater.pro

[6] iTunes Link: http://itunes.apple.com/app/allrecipes.com-dinner-spinner/id299515267

[7] kuler.adobe.com: http://kuler.adobe.com

[8] ColourLovers: http://www.colourlovers.com/palettes/most-loved/all-time/meta

[9] Android Market Link: https://market.android.com/details?id=com.imdb.mobile