Ошибки в дизайне Android приложений с примерами из России

30.06.2014 | Автор: Анатолий Ларин, Touch Instinct (Менеджер по развитию бизнеса)  print.gif

photo-10035.jpg

Гайдлайны Android лихо нарушают известные приложения (нижний таббар у Инстаграма). Приложения гугла, менее лихо, но тоже нарушают. Я сильно удивился, когда в официальном подкасте Android Design In Action запрещают помещать настройки в Navigation Drawer, но гугловские Play Music и Play Books через полгода поместили их именно туда. Следовать рекомендациям гугла про дизайн или нет — вопрос спорный.

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

Я собрал типичные ошибки из раздела гайдов Pure Android, эпизодов официального подкаста Android Design In Action Common UX Issues и Navigation Anti Patterns и дополнил примерами из российских бизнес приложений.

Элементы интерфейса и иконки других платформ Не стилизуйте кнопки, поля ввода и другие элементы интерфейса под iOS6, 7 или Windows Phone.

Посмотрите как правильно выглядят элементы в Building Blocks и приложениях от Google. Здорово, что все меньше и меньше российских приложений нарушают это правило. Но примеры еще остались.

Am.ru стилизует табы под iOS6, а Auto.ru кнопки.

Таббар внизу Казалось, переносить tabbar вверх при портировании iOS приложений на Android мобильные студии научились еще полтора года назад.

Но Сбербанк выпустил новую версию с tabbar внизу:

Пользователей которые используют ваше приложение и на iOS и на Android не существует. Нет причин клонировать iOS навигацию или дизайн.

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

Правильно сделано в Delivery Club. При тапе на бургеры табы скрываются:

Неправильно у Ozon.ru, Wildberries и Яндекс Электричек, при переходе на внутренние экраны табы остаются. Смесь навигации и действий в Navigation Drawer Изначально Navigation Drawer (боковая панель) предназначался только для навигации. «Настройки» и «Сообщить об ошибке» рекомендовали убирать в Action Bar. Н

Но теперь Google передумал и размещает действия внизу Navigation Drawer, однозначно отделяя их от навигации.

У многих приложений встречается неправильная смесь навигации и действий: Ulmart, HeadHunter, Из рук в руки, Техносила. Банк Тинькова вообще превратил Navigation Drawer во что-то странное. Это некорректно и сбивает пользователей с толку.

Некорректные иконки на страницах из Navigation Drawer На всех экранах из Navigation Drawer должна быть иконка из трех полосок, на вложенных экранах — стрелочка назад.

Из рук в руки не имеет такой иконки вообще. Ulmart показывает стрелку назад на некоторых экранах из Navigation Drawer. HeadHunter показывает стрелку назад вместо иконки ND.

Неправильная анимация появления экранов из Navigation Drawer Новые экраны в Андроид появляются, растягиваясь из центра экрана. А при выборе экрана из Navigation Drawer боковая панель уезжает и экран плавно появляется без растяжения.

Неправильная анимация реализована в приложениях Молотка и ТКС банка.

Модальные диалоги загрузки Модальные диалоги загрузки ужасны, тем более большинство из них нельзя закрыть кнопкой «Назад». Правильно — индикатор загрузки прямо на экране. Идеально — загрузка данных в фоне.

Модальные диалоги загрузки используются в Объявлениях Из Рук в Руки, Am.ru, Яндекс Авто и Ситилинке.

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

По-моему, пункт спорный. Но это официальная позиция Google, посмотрите Play, Music или Books. Ребята из Android Design In Action утверждают, что реализовать поддержку альбомной ориентации наполовину можно за пару часов (и пару недель на остальную половину :).

Правильно сделано у Sports.ru, HeadHunter, Ситилинка, Новостей Mail.ru.

Неправильно — почти у всех остальных.

Полный текст статьи читайте на CMS Magazine