Разбор мобильного приложения Skyeng
Мой сын изучает английский язык в детской онлайн-школе Skysmart, это один из брендов Skyeng. Недавно учитель посоветовала нам установить приложение, чтобы было удобнее учить слова. Я так и сделала.
Оказалось, в приложении можно не только учить английские слова, но и управлять расписанием по всем своим предметам: добавлять новые предметы, менять расписание, пополнять баланс.
Несмотря на то что идея с приложением — крутая (особенно понравилась птичка, которая растёт по мере того, как ты учишь слова), первый опыт использования приложения вызвал много вопросов — по тексту и UX-дизайну, решила сделать разбор. Про UI-дизайн ничего сказать не могу, так как не дизайнер.
Мой разбор — только конструктивная критика. Я люблю продукты Skyeng и Skysmart. Однако это не лишает их приложение проблем с консистентностью и понятностью текстов, так что сажусь на лавку, запасаюсь семками и начинаю песочить.
Оказалось, в приложении можно не только учить английские слова, но и управлять расписанием по всем своим предметам: добавлять новые предметы, менять расписание, пополнять баланс.
Несмотря на то что идея с приложением — крутая (особенно понравилась птичка, которая растёт по мере того, как ты учишь слова), первый опыт использования приложения вызвал много вопросов — по тексту и UX-дизайну, решила сделать разбор. Про UI-дизайн ничего сказать не могу, так как не дизайнер.
Мой разбор — только конструктивная критика. Я люблю продукты Skyeng и Skysmart. Однако это не лишает их приложение проблем с консистентностью и понятностью текстов, так что сажусь на лавку, запасаюсь семками и начинаю песочить.
# 1. Стартовый экран приложения
Текст «Уже учитесь в Skyeng?» на стартовом экране лишний:
- кнопка «Войти в свой аккаунт» уже подразумевает, что у пользователя есть аккаунт на платформе, то есть он уже учится в Skyeng;
- вопрос вводит пользователя в заблуждение, ибо кажется кликабельным (как альтернатива кнопке), но не кликабелен.
#2. Плашка в личном кабинете
Строка «Баланс» кажется не кликабельной, но на самом деле очень даже кликабельна. Снова неочевидность.
Опираясь на опыт со стартовым экраном, вы можете решить, что текст «Баланс 0 занятий» не кликабельный, а просто строка состояния, которая сообщает нам, сколько осталось занятий на балансе. Но это не так! Сюда можно кликнуть и перейти на вот эту страницу:
Чисто редакторская придирка: нет глагола в «Чем больше занятий — тем выгоднее!», из-за этого призыв какой-то хлипкий, сомнительный.
Лучше: Оплачивайте больше занятий сразу — учитесь по выгодной цене!
Но вернемся к экрану с балансом, к нему ещё остались вопросы.
Лучше: Оплачивайте больше занятий сразу — учитесь по выгодной цене!
Но вернемся к экрану с балансом, к нему ещё остались вопросы.
Маленькая красная стрелка здесь, как элемент управления, незаметна. В итоге пользователю приходится долго рассматривать блок, чтобы разгадать, что здесь можно сделать.
Обратите внимание на неточность: в подзаголовке предлагается выбрать расписание занятий, хотя по факту в этом блоке можно сделать не только это.
Обратите внимание на неточность: в подзаголовке предлагается выбрать расписание занятий, хотя по факту в этом блоке можно сделать не только это.
Такая же перепичканность функциями прослеживается с элементом в другом месте:
Плюс позволяет добавить слово к себе на изучение, а серое «Открыть» — открывает страницу с картинкой и предложениями, где употребляется слово. Вот так выглядит эта страница:
Эти два элемента в одном блоке усложняют восприятие. Я оставила бы только одно действие здесь. Вот так:
Пользователь теперь может нажать на стрелку и оказаться на странице со словом (выше показывала) — и там уже добавить себе слово на изучение. Устраняем синий плюс — устраняем перепичканность функциями в таком маленьком элементе.
#3. Кнопка «Дальше» и набор действий, от которого в глазах рябит
Интересно, что на странице, где слово рассматривается подробно, вообще нет функции добавить себе его на изучение.
Вот всё, что там предлагается сделать со словом:
А где возможность добавить слово в свой словарь? Ведь ради этого в основном и кликают на слова.
Цветные иконки, когда их так много, начинают рябить, тянуть внимание на себя. На понимание смысла слов сил остается немного.
Эти иконки точно не нужны в таком количестве и цвете. Но если их убрать, то мы заметим, что выбор функций слишком велик, трудно сориентироваться. Иконками дизайнер хотел помочь пользователям сориентироваться, так как сам понимал — текста слишком много. Но только проблема не в тексте, а в проектировании.
Здесь же подозрительная кнопка «Дальше». Такой нейминг кнопки неудачен, так как не обозначает действие/глагол (а именно это и должно быть на кнопке).
Дополнительная магия в том, что кнопка «Дальше», кажется, зачем-то дублирует кнопку «Пропустить», которая выше. И та и другая кнопка открывает следующее слово.
- указать, что уже знаешь его;
- указать, что не хочешь знать, то есть снова отклонить;
- начать какое-то изучение сначала, хоть куда уж сначала, мы только что и перешли на подробности про это слово. Это совсем неочевидная функция;
- ну и пожаловаться на контент.
А где возможность добавить слово в свой словарь? Ведь ради этого в основном и кликают на слова.
Цветные иконки, когда их так много, начинают рябить, тянуть внимание на себя. На понимание смысла слов сил остается немного.
Эти иконки точно не нужны в таком количестве и цвете. Но если их убрать, то мы заметим, что выбор функций слишком велик, трудно сориентироваться. Иконками дизайнер хотел помочь пользователям сориентироваться, так как сам понимал — текста слишком много. Но только проблема не в тексте, а в проектировании.
Здесь же подозрительная кнопка «Дальше». Такой нейминг кнопки неудачен, так как не обозначает действие/глагол (а именно это и должно быть на кнопке).
Дополнительная магия в том, что кнопка «Дальше», кажется, зачем-то дублирует кнопку «Пропустить», которая выше. И та и другая кнопка открывает следующее слово.
#4. Раздел «Домашка»
Здесь должны появляться плашки с домашкой, а новая домашка, которую только что задал преподаватель, ещё с текстом-индикатором «Новое».
Карточки появляются с разным текстом-индикатором: то «Новое», то «Новое задание». Думаю, это просто невнимательность. Но интереснее другое: в этом разделе по факту я вижу ТОЛЬКО новые домашки, старых нет. Чтобы посмотреть старые и сделанные, надо кликнуть сюда:
Таким образом, если это априори раздел для новых домашек, нет смысла помечать каждую как «Новое». Логичнее назвать весь раздел не «Домашка», а «Новая домашка» или «Задано учителем», да и всё.
#5. Раздел «Изучение слов»
В подзаголовке упоминаются «упражнения», но в последнем элементе спрашивают, хочу ли я больше «тренировок». Это одно и то же или нет?
Кстати, звучит странно:
Хотите больше тренировок? Добавьте слова сами!
Примерно как:
Хотите больше вкусных бургеров в нашем ресторане? Приготовьте их сами!
Я понимаю, что хотели сказать дизайнеры, но сказано это с щепоткой пассивной агрессии.
Ещё не могу не придраться и к этому:
Кстати, звучит странно:
Хотите больше тренировок? Добавьте слова сами!
Примерно как:
Хотите больше вкусных бургеров в нашем ресторане? Приготовьте их сами!
Я понимаю, что хотели сказать дизайнеры, но сказано это с щепоткой пассивной агрессии.
Ещё не могу не придраться и к этому:
# 6. Смысловая каша в словаре
Есть «Все слова», в эту группу по идее входят «Из уроков» и «Добавленные мной». Если вы не учитесь в Skyeng, вы никогда не догадаетесь, что слова в группу «Из уроков» добавляет учитель.
Почему-то в «Добавленные мной» важно было указать, кто добавляет слова, а в случае «Из уроков» неважно. Разный принцип наименования, почему? Уверена, здесь нет тайного смысла. Просто рандомный подход к неймингу.
Почему-то в «Добавленные мной» важно было указать, кто добавляет слова, а в случае «Из уроков» неважно. Разный принцип наименования, почему? Уверена, здесь нет тайного смысла. Просто рандомный подход к неймингу.
Почему возникают сложности с неймингом навигации?
Дизайнеры всегда испытывают подобные сложности там, где хромает логика. Если вы ломаете голову, как назвать раздел, кнопку, элемент в списке, значит, вы собрали под одной крышей не объединяемые вещи. Вам нужно пересмотреть дизайн.
Вот ещё один пример, который доказывает, что проектирование слабое:
Дизайнеры всегда испытывают подобные сложности там, где хромает логика. Если вы ломаете голову, как назвать раздел, кнопку, элемент в списке, значит, вы собрали под одной крышей не объединяемые вещи. Вам нужно пересмотреть дизайн.
Вот ещё один пример, который доказывает, что проектирование слабое:
Кнопка-хамелеон: выбирай, на что хочешь нажать! Но чтобы понять, что кнопка умеет, сначала потрать своё время и залезь внутрь — в секретный список. Это как?! Это кнопка вообще? Или список? Или выпадайка?
Кнопка всегда про немедленное действие. А здесь предлагается ещё предварительно что-то выбрать перед тем, как нажать.
Кнопка всегда про немедленное действие. А здесь предлагается ещё предварительно что-то выбрать перед тем, как нажать.
Вот что нашла про такое решение книге Ильи Бирмана «Пользовательский интерфейс»:
«Один и тот же жест может вызывать разные действия в разных состояниях интерфейса. Кнопка Энтер ↩ в текстовом редакторе начинает новую строку, а в чате — отправляет сообщение. Педаль газа обычно значит «ехать вперёд», но если включена задняя передача, то уже «ехать назад».
Интерфейс называется модальным, если в нём есть состояния, которые человек не осознаёт во время жеста, но в которых этот жест интерпретируется по-разному».
И ещё:
«Модальность — признак плохого интерфейса, а не, скажем, рассеянности пользователя. Совершенно естественно, что внимание человека направлено на его задачу, а не на состояние интерфейса».
Его пояснения на эту тему
«Один и тот же жест может вызывать разные действия в разных состояниях интерфейса. Кнопка Энтер ↩ в текстовом редакторе начинает новую строку, а в чате — отправляет сообщение. Педаль газа обычно значит «ехать вперёд», но если включена задняя передача, то уже «ехать назад».
Интерфейс называется модальным, если в нём есть состояния, которые человек не осознаёт во время жеста, но в которых этот жест интерпретируется по-разному».
И ещё:
«Модальность — признак плохого интерфейса, а не, скажем, рассеянности пользователя. Совершенно естественно, что внимание человека направлено на его задачу, а не на состояние интерфейса».
Его пояснения на эту тему
