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

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

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

Проблемы

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

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

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

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

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

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

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

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

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

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

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

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

Решение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

UPDATE

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

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

Thank you very much 😉

Неудачный редизайн страниц Кинопоиска HD

Каталог потерял полезное действие

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

Неудачный редизайн страниц Кинопоиска HD 8
Каталог до редизайна

В экран телевизора помещалось 12 элементов. При клике вниз на пульте я листал сразу по 6 фильмов и мог быстро пролистать десятки фильмов.

Неудачный редизайн страниц Кинопоиска HD 9
Каталог после редизайна

Каталог после редизайна превратился в 8 элементов. Если считать отчётливое отображение — 4 элемента.

Год и жанр переместились в полу-открытую страницу фильма. Название стандартным шрифтом из списка пропало.

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

Неудачный редизайн страниц Кинопоиска HD 10
Детальная страница фильма

При том что при клике на фильм в каталоге новый экран не сильно меняется — добавляются только кнопки в нижней части экрана.

Прокручивать стало дольше

Я не хочу читать описание каждого фильма. Мне нужен жанр, название, год. Это всё. Я хочу читать описание фильма, если он меня заинтересует.

Дизайнеры Кинопоиск HD думают по-другому. По их мнению я хочу читать описание каждого фильма.

Неудачный редизайн страниц Кинопоиска HD 11
Каталог после редизайна

Под скроллинг выделили 2 строки по 4 элемента. Если опять же учитывать отчётливое отображение фильмов, то я вижу 4.

Включим арифметику.

До редизайна я мог прокрутить список из 300 фильмов за 50 кликов.
После редизайна я прокручу тот же список за 75 кликов.

Вернуться из слайдера

Неудачный редизайн страниц Кинопоиска HD 12

Раньше вернуться в меню из слайдера на главной страницы было легко — просто кликни вверх и ты в меню.

Неудачный редизайн страниц Кинопоиска HD 13

Сейчас меню находится слева, а слайдер фильмов тоже прокручивается влево и право. Если я в слайдере ушёл далеко вправо → попадать в меню я замучаюсь.

Я перешёл в конец слайдера и тут возникла дополнительная проблема

Отсутствует ускорение при скролле

Я потратил 20 секунд, чтобы вернуться в самое начало и попасть в меню и так будет во всех строках с фильмами, а не только в слайдере «Популярное».

Здесь всё ещё хуже — мы можем листать только по одному фильму. И если сравнивать с каталогом:

До редизайна

60 фильмов за 10 кликов

После редизайна

60 фильмов за 60 кликов

Процесс скроллинга влево до меню

Юху! Я долистал до меню, спасибо дизайнерам из Кинопоиск HD.

Навязывание поведения при навигации по каталогу

Если мы в строке находимся на четвертом элементе, при клике вниз интерфейс перекидывает нас в начало и если я хотел посмотреть самый правый фильм — +3 клика.

В каждой строке интерфейс запоминает положение и это ещё сильнее ломает логику навигации. Я уже не помню, где я останавливался, разве это вообще важно?

Итоговая оценка редизайна

— Можно было и поработать

Борьба с играми

Когда начал играть

Я долго борюсь с компьютерными играми. Играл я просто дофига. Я решил проанализировать мою сильную тягу к играм.

Первый компьютер мне купили в 11 лет и там уже стояла Call of Duty. Совпадение? Не думаю 🙂

После покупки я сутками зависал в этой Call of Duty. Потом я сдружился с одноклассником и мы скачали Северный клинок.

Северный клинок » Скриншоты игроков » Fun765567 » Без названия

Я играл с 6:00 до 8:45, потом шёл в школу, а потом продолжал играть с 15:00 до 03:00.

И так весь 9 класс. Неудивительно, что в аттестате нарисовалось 18 троек из 24 (не помню точно сколько было предметов).

Мама боролась как могла, но помогло лишь закрытие игры в 2011 году.

Путь задрота начался в 11 лет и только сейчас начинает потихоньку загибаться.

На данный момент самое продолжительное время, которое я «воздерживался» — 6 месяцев.

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

Почему решил перестать играть

Как-то раз я скачал игру Mount and Blade. Это игра про королевства, армии, пленников и войны.

Читы для Mount & Blade 2: Bannerlord - Shazoo

Что примечательного есть в этой игре:

  • Персонаж, у которого есть какие-то характеристики.
  • Создание клана и семьи.
  • Замки и возможность эти замки добывать и терять в бою
  • Армия и управление армией: найм новых спецов, командиры, отряды, прокачка.
  • Имущество: налоги, пошлины, бизнесы, замки, деревни

Я начал в неё играть на условии развития в себе качеств управления армией, замками, целями. То есть мотивы-то были хорошие.

Но вот выбор метода развития через игры — зло.

Мысль удалить игру пришла тогда, когда я проснулся и первая мысль была: «Интересно, сколько я сегодня соберу налогов с замка Радогир?»

Именно в тот момент я понял всю жесть игр. Наш мозг воспринимает игру как реальность. Он видит, что у меня 3 замка, жена, доходы, армия. Он успокаивается и даёт всему организму команду: «Все молодцы, здорово потрудились, забиваемся в дальний угол и отдыхаем».

При том, что в реальной жизни может быть полный ахтунг.

Может быть есть варианты, а?

Я подумал: «Окей, я не могу играть в игры, где есть имущество и возможность реализации, тогда я буду играть в простые сюжетные игры».

Взяв левую преимущественно сюжетную игру я начал её анализировать:

  • Сюжет такой, чтобы я всех спас, то есть в финале я герой (достижение)
  • Есть любовная линия (семья)
  • Есть дерево навыков (навыки)
  • Есть оружие и броня, которое нужно крафтить и улучшать (имущество)

В итоге мы все равно приходим к той же модели: сопоставляем себя с персонажем и прокачиваем его, а не себя в 4 отраслях:

  • Достижение целей
  • Семья
  • Навыки
  • Имущество

Так что плохого-то?

Плохо то, что мы в голове сопоставляем себя с персонажем, его достижения = наши достижения. Его доходы и владения = наши доходы и владения.

Если я всю энергию потратил на добывание замка в игре — мозгу нет смысла давать мне энергию, чтобы заработать денег и купить свой дом в реальности. У меня уже «есть» замок

И чем дольше я играл, тем лучше становилась виртуальность и хуже реальность. И чем хуже она становилась, тем больше хотелось играть, потому что в игру у меня все забубенно: слава, деньги, армия, замки.

После того, как я завязал с играми, я начал смотреть на свою реальную жизнь и искать то, что я могу улучшить.

Я представил себя игроком свой игры, где я персонаж на сервере. У меня есть замок — съёмная квартира. Метод добычи ресурсов — дизайн и разработка сайтов.

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

Это самый главный плюс при отказе от игр.

→ Тело и мозг дают энергию на выполнение реальных целей и удовольствие от их достижения