← На страницу блога
106

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

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

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

Проблемы

Редизайн приложения «Полиглот» 1
Экран выполнения упражнения

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

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

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

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

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

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

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

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

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

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

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

Решение

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

Редизайн приложения «Полиглот» 4
Стартовый экран

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

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

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

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

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

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

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

Редизайн приложения «Полиглот» 6
Экран результата

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

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

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

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

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

UPDATE

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

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

Thank you very much 😉

Полезно
2
1
Непонятно
1
← На страницу блога

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

← На страницу блога