Редизайн приложения «Полиглот»

Сегодня у нас редизайн приложения «Полиглот». Приложение «Полиглот» помогает прокачивать английский язык — предлагает упражнения из серии видеоуроков Дмитрия Петрова — «Английский за 16 часов».

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

Проблемы

Иконки голосового ввода далеко от низа экрана

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

Я плевался всю дорогу, пока тянулся до этой иконки пальцем левой или правой руки. Она находится в самом верху и до неё очень сложно дотянуться.

Большую часть смартфонов больше 5 дюймов и достать большим пальцем до иконки, держа телефон одной рукой — сложно.

До верхних слов в столбиках не дотянуться

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

Дополнительная интерактивность располагается вверху экрана

Кнопки: голосовой ввод, удаление, прослушивание правильного ответа — все находятся в верхней части экрана.

Эти действия могут требоваться каждую секунду. Нажал голосовой ввод, убрал неправильное слово, прослушал ответ. Каждый день я делаю по 45 фраз, значит я кликаю по эти кнопками примерно 100−150 раз.

Решение

У нас есть несколько элементов, которые часто кликаются: кнопка и слова. Это основные элементы, над которыми мы должны поработать.

Стартовый экран

Кнопку разместить по центу, чтобы было удобно пользоваться независимо от руки.

Слова сместили ниже, чтобы можно было достать верхние.

Поле размещается внизу, потому что мы оставляем возможность добавление функции ввода с клавиатуры. Чтобы при вводе поле было видно и не закрывалось появившейся клавиатурой.

Процесс ввода

Иконка в кнопке меняется на удаление. Выбранное слово засветляется, показывая недоступность. Фраза вверху затемняется, потому что пользователь сосредоточен на введении, а не переводе фразы.

Результат упражнения в случае ошибки

В случае ошибки мы подсвечиваем поле красной линией и меняем цвет неправильной части ответа на красный.

В центре показываем правильный ответ и полупрозрачным перевод фразы.

Внизу 2 кнопки. «Озвучить правильный ответ» в неакцентном стиле. Кнопка «продолжить» в акцентном стиле, так как является главным действием. Расположена справа, потому что обычно продолжаем двигаться вправо, а возвращаемся всегда влево.

UPDATE

Сместил слова ближе к центру, чтобы было удобнее доставать пальцем. Может быть стало «не по сеточке», но тут топим не только за эстетику, а в первую очередь за удобство.

Если вы знаете приложение, дизайн которого нужно обновить → присылайте в комментарии ссылку и причину редизайна. Будем улучшать мир вместе!

Thank you very much 😉