Из-за фатальных ошибок в дизайне страдает ваш бизнес и идея. Описанное ниже полезно знать начинающим дизайнерам и заказчикам мобильных интерфейсов. Так заказчики буду знать, на что обращать внимание при создании дизайна.
Начинайте разработку с прототипирования дизайна. С прототипом у вас будет возможность оценить работоспособность функционала без потери времени. Создайте ФОКУС-группу и протестируйте на ней прототип – это поможет методом проб и ошибок добиться нужного результата, и в дальнейшем не делать смертных грехов в интерфейсе.
1. Игнорирование «Закона Фиттса»
Закон Фиттса простыми словами: от увеличения кнопки не зависит повышение ее эффективности. Это может казаться очевидным, но это один из самых игнорируемых принципов в дизайне. Нужно соблюдать иерархию подачи контента. Если ее правильно выставить, контент сам приведет пользователя к кнопке «Купить».
2. Маленький радиус нажатия
При создании дизайна для сенсорных устройств учитывайте, как легко пользователь может работать с приложением с помощью пальцев. Минимальная сенсорная область 7мм x 7мм. Средняя ширина пальца взрослого – 25 мм. Уберегите пользователя от случайного нажатия на другой элемент в вашем интерфейсе. Между элементами ставьте зазор в 2 мм.
3. Несколько сайд-баров
Очевидная ошибка при проектировке приложения — размещение основной навигации в разных местах. Все пункты меню должны быть в одном месте.
4. Текст в слайдере
Скролить вниз удобно для пользователя. Листать страницы в сторону — нет. Также слайдер в тексте уменьшает количество запросов к странице. И даже если пользователю нравится скоролить вниз, не делайте контент слишком длинным. Выделяйте семантику и подавайте пользователю основную информацию по разделу.
5. Выдача ошибок по ходу заполнения поля
Современную форму скрипт проверяет по ходу заполнения. Но это не повод, чтобы интерфейс ругался на пользователя до того, как он хоть что-то ввел в поле. Правильно говорить об ошибке пользователю тогда, когда он закончил ввод и вышел из поля. О незаполненных полях говорим при попытке отправки.
6. Отсутствие иерархии в контенте
При создании макета думайте о том, что пользователь ищет и как быстро он сможет это найти. Используйте подсказки и информативные короткие тезисы. Расставляйте правильную иерархию в содержании, а информативные подсказки ставьте в начале текста.
7. Нечитабильность
Типографика имеет жизненно важное значение в цифровом дизайне и имеет большое влияние на доступность продукта в целом. Правильная длина текстовых линий и выдержанный интерлиньяж (расстояние между строками) помогут пользователю с легкостью перемещаться по контенту.
Чтобы избежать ошибок в дизайне мобильных интерфейсов, которых на деле гораздо больше семи, вооружитесь лучшими примерами книг: PixelPerfectPrecision, The GUIDe to Wireframing, Web UI Design Best Practices.
Автор: Максим Острожинский, Senior UI/UX Designer в Softengi