Из-за фатальных ошибок в дизайне страдает ваш бизнес и идея. Описанное ниже полезно знать начинающим дизайнерам и заказчикам мобильных интерфейсов. Так заказчики буду знать, на что обращать внимание при создании дизайна.

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

1. Игнорирование “Закона Фиттса”

Закон Фиттса простыми словами: от увеличения кнопки не зависит повышение ее эффективности. Это может казаться очевидным, но это один из самых игнорируемых принципов в дизайне. Нужно соблюдать иерархию подачи контента. Если ее правильно выставить, контент сам приведет пользователя к кнопке “Купить”.

mistake_1

2. Маленький радиус нажатия

При создании дизайна для сенсорных устройств учитывайте, как легко пользователь может работать с приложением с помощью пальцев. Минимальная сенсорная область 7мм x 7мм. Средняя ширина пальца взрослого – 25 мм. Уберегите пользователя от случайного нажатия на другой элемент в вашем интерфейсе. Между элементами ставьте зазор в 2 мм.

mistake_2

3. Несколько сайд-баров

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

mistake_3

4. Текст в слайдере

Скролить вниз удобно для пользователя. Листать страницы в сторону – нет. Также слайдер в тексте уменьшает количество запросов к странице. И даже если пользователю нравится скоролить вниз, не делайте контент слишком длинным. Выделяйте семантику и подавайте пользователю основную информацию по разделу.

mistake_4

5. Выдача ошибок по ходу заполнения поля

Современную форму скрипт проверяет по ходу заполнения. Но это не повод, чтобы интерфейс ругался на пользователя до того, как он хоть что-то ввел в поле. Правильно говорить об ошибке пользователю тогда, когда он закончил ввод и вышел из поля. О незаполненных полях говорим при попытке отправки.

mistake_5

6. Отсутствие иерархии в контенте

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

mistake_6

7. Нечитабильность

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

mistake_7

Чтобы избежать ошибок в дизайне мобильных интерфейсов, которых на деле гораздо больше семи, вооружитесь лучшими примерами книг: PixelPerfectPrecision, The GUIDe to Wireframing, Web UI Design Best Practices.

Автор: Максим Острожинский, Senior UI/UX Designer в Softengi