Здравствуйте, меня зовут Дмитрий Карловский и я.. нет, я не дизайнер. Так что не стоит воспринимать мои слова всерьёз. Я просто пользователь. И у меня пригорает от популярных дизайнерских решений, бездумно копируемых из одного приложения в другое..
Переключатель панелей
Дизайнер решил, что если все табы в экран не влезли, то тем хуже для этих табов, и им делается обрезание. Однако, часто пользователь не знает какие вообще есть табы, а чтобы узнать, надо поскроллить туда-сюда. При этом, если табы обрезались неудачно, то он может даже не догадываться, что там вообще есть что скроллить. А даже если пользователь и знает, что нужный ему таб тут есть, то он не может просто перейти к нему - надо елозить пальцем из стороны в сторону. И счастье, если дизайнер не додумался сделать переключение табов по одному, без возможности отскроллить к нужному и нажать на него.
А что если не выпендриваться, и просто сделать многострочный переключатель?
Тут все варианты сразу перед глазами. Переход к любой панели происходит за одно нажатие. Да, он может занять две строки, но эти сроки получаются меньше, так что по вертикали занимают примерно столько же места.
Кнопки тут имеют минимальный размер в 40px для круглого числа, но даже если их увеличить до рекомендуемых 44px, то это погоды не сделает.
Если же табы не умещаются и в 2 строки, то их число уже определённо больше, чем помещается в кошелёк Миллера, и стоит подумать о полноценном боковом меню с группировкой и поиском.
Поле ввода
Дизайнер хотел дать контенту больший приоритет, и поэтому решил написать все пояснения к полям буквами в два раза меньшего размера. Однако, пользователи с не слишком идеальным зрением, испытывают не просто трудности с чтением мелкого текста, а самую настоящую боль в глазах от повышенного их напряжения для фокусировки.
А что если не выпендриваться, и просто уменьшить контраст второстепенных текстов?
Тут уже лейблы и не перетягивают внимание на себя, и без проблем могут быть прочитаны при необходимости.
Меню действий
Один дизайнер решил, а другой с ним согласился, что аккуратное меню внизу экрана прелестно смотрится и не загораживает основной контент, располагающийся обычно сверху. Это всё, конечно, прекрасно, но когда нажимаешь кнопку вверху экрана, то, чтобы дотянуться до его нижнего края, нужно перехватывать девайс в руке. Порой это приходится делать в несколько движений, особенно в попытке дотянуться до самого труднодоступного левого нижнего угла экрана. Нередко это приводит к выпадению девайса из руки. А трещины, идущие через весь экран, — это уже не так красиво, как в дизайн‑макетах.
А что если не выпендриваться, и просто показывать меню рядом с местом его вызова?
Скучно? Конечно! Но пользователь запустил наше приложение не для того, чтобы с менюшками развлекаться и девайсом жонглировать, а чтобы наименее энергозатратно решать свои задачи.
Селектор из списка
Один дизайнер долго подбирал идеальные цвета, тени, шрифты, отступы, самые сексуальные анимации и переходы.. а потом вывалил в селектор 50+ опций плоским списком и решил, что это хорошо, а другой с ним согласился.
Это только в демонстрациях перед менеджментом можно выбрать любое значение и пойти дальше. А при реальном использовании пользователь может минуту ковыряться в поисках нужного значения, вспоминая с какой буквы оно начинается и какая буква идёт после какой в алфавите. Особенно весело настраивать переводчик, число языков в котором исчисляется сотнями.
А что если не выпендриваться, и просто добавить полнотекстовую фильтрацию ко всем селекторам?
И нет, использование текстового поля с автозавершением, о котором подумал дизайнер, не является альтернативой, так как:
Фокусировка текстового поля открывает экранную клавиатуру, которая перекрывает опции.
Значения, выбираемые селектором, обычно являются внутренними идентификаторами, а пользователю показывается что‑то более понятное для него.
Текстовые поля позволяют вводить не валидные значения, что требует ручного решения множества краевых случаев: валидация, нормализация, сигнализация и тд.
Селектор времени
Слева дизайнер решил, что крутить 3 барабана — это интуитивно, тактильно и весело. Да, весело, поиграться первые пару раз. А потом это сильно раздражает, что вместо двух простых тапов приходится:
Сначала вслепую мотать барабан на 12–24 значения.
Потом мотать его обратно, потому что перелетел нужное значение.
Ещё пару раз туда‑сюда, замедляя скорость вращения.
Потом тоже самое со вторым барабаном уже на 60 значений.
Ну и третий вырожденный барабан на 2 значения ущипнуть при необходимости.
Справа дизайнер решил, что современный человек до сих пор пользуется стрелочными часами, так что мгновенно найдёт нужное число на круговом циферблате. Однако, реальность суровее:
Подавляющее большинство часов сейчас имеют числовой циферблат.
Многие люди имеют ощутимые трудности с поиском чисел в круге, по сравнением с линейным порядком.
Мелкие числа больше 12 искать сложно даже тем, кто привык ко круговому циферблату.
А что если не выпендриваться, и просто решить задачу пользователя?
Чтобы ввести время нужно всего два нажатия:
Выбрать час
Выбрать минуту
Либо можно тапнуть в поле ввода и ввести значение с клавиатуры или вставить из буфера обмена.
Да, точность такого селектора до 5 минут, но зачастую даже такая точность является избыточной. При необходимости же, можно ввести время вручную хоть с миллисекундами.
Призывы к действию
Подкидывайте в комментариях свои примеры бестолкового дизайна от именитых дизайнеров и компаний.
Присоединяйтесь ко критическим обсуждениям дизайна и пользовательского опыта в Гильдии Hyper Dev.
Рассказывайте, как вы сами элегантно решали интерфейсные проблемы, до чего другие не додумывались или не решались.
А главное — думайте о тех людях, которые реально пользуются вашими интерфейсами, а не о тех, которые только потеребонькать их открывают, но мнение имеют.
Актуальный оригинал на $hyoo_page.
