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

в 12:23, , рубрики: дизайн, приложения, юзабилити, метки: , ,

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

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

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

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

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


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

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

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

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

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


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

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

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

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


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

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

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


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

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

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


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

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

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

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

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


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

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

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


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

Автор: pavlushka

Поделиться

* - обязательные к заполнению поля