[#MetroLynch] TranslateThis

Друзья, первой жертвой разбора дизайна стало приложение TranslateThis Дмитрия Казарина.

image

Навигация

Экран настроек

Переключение “Internet access” (помимо того, что непонятно, что оно делает) сейчас конфликтует по используемым жестам с переключением вкладок Pivot.

image

Исправление: заменить toggleSwitch на чекбокс.

Дизайн

Экран загрузки

Сейчас используется стандартный экран загрузки. Хотя это вполне допустимо, намного лучше, если используется кастомный экран, например, с логотипом приложения.

image

Рекомендация: добавить собственный экран загрузки с логотипом или названием приложения.

 

Панель приложения

В панели приложения использует полупрозначный фон, однако, выставленный уровень прозрачности (непрозрачности -- opacity) делает панель в развернутом состоянии малоконтрастной, что мешает восприятию, особенно если в поле вывода (output) есть какой-то текст.

image

Исправление: убрать прозрачность совсем или уменьшить уровень прозрачности.

 

Выравнивание элементов

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

image image image image image

Исправление: выровнять элементы по левому краю на всех страницах.

  • Для экранов “history” и “favorites” оригинальный текст и перевод нужно также выровнять по левому краю.
  • Для экрана “gratitudes” сделать внутреннее выравнивание контента также по левому краю, выделив заголовок размером текста (двоеточние нужно убрать).
  • Иконка проигрывания текста на экранах “history” и “favorites” должна быть выровнена по верхнему краю с блоками текста, а не посередине как сейчас.
  • Подписи к текстовым блокам должны прилипать к ним, например, надписи “input text” и “result” надо опустить ниже — ближе к полям ввода.

 

Названия полей ввода

Поля ввода в приложении имеют гиковские названия input, output, result.

Рекомендация: переименовать их в более привычные для обычного пользователя (см. например, google translate или bing translate: from, to.

См. также следующий пункт.

 

Иконка воспроизведения текста на экране “translate”

Она располагается напротив заголовка поля ввода или вывода результата, хотя относится к содержимому самого поля. К тому же она располагается ровно между предыдущими полями и теми к которым относится (и даже чуть ближе к первому), что тоже неправильно:

image

Исправление: как минимум иконку нужно опустить ниже. Также ее можно разместить справа от поля ввода/вывода результата:

image

 

Экран “History”

Я бы ожидал, что элементы списка должны выглядеть ровным счетом наоборот: сначала оригинал, потом перевод. Встречаются повторы. Если я использовал перевод на более чем двух языках, становится трудно понять, где какой результат, если я не знаю хорошо используемые языки.

image

Исправление: изменить отображение элементов списка. Схлопывать одинаковые запросы. Объединять переводы одного и того же слова на разные языки. Отображать языки перевода. Например:

image

Рекомендация: также надо сделать менее навязчивым вывод вариантов перевода из разных сервисов, особенно если они не отличаются.

Замечание: аналогично можно делать для экрана “favorites”.

 

Слишком длинные тексты для перевода

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

image

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

Длинные тексты также неадекватно отображаются в “history” и “favorites”, так как выводятся целиком, с повторами и большим шрифтом:

image

Исправление: см. выше в «Экран “history”». Рекомендую попробовать выводить только первую строчку на языке оригинала и при разворачивании элемента списка показывать уже текст целиком.

  • Как вариант также можно рассмореть вариант, когда элементы списка являются кликабельными и по нажатию выводится новая страница с результатами перевода и сопутствующими деталями.
    image

 

Функциональность

Проигрывание текста голосом

Повторное нажатие на кнопку проигрывания приводит к запуску воспроизведения текста голосом поверх уже проигрываемого. Аналогично с проигрыванием текста в истории или избранном.

Исправление: не запускать повторное воспроизведение до окончания проигрывания текущего ролика.

 

Рекомендация: также может оказаться полезным заменить иконку спикера image  на иконку запуска проигрывания или остановки воспроизведения (иконки желательно разместить в кружочке -- image ). Это также может быть полезным, если пользователь хочет остановить проигрывание.

Замечение: это желательно протестировать на пользователях прежде, чем внедрять.

p.s. Google звучит как “Гоогле”.

 

Проигрывание текста на неподдерживаемых языках

Некоторые языки не поддерживаются для воспроизведения голосом. В этом случае вываливается непонятное пользователю сообщение об ошибке:

image

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

 

Ввод текста

Клавиатура содержит кнопку “return”, по нажатию на которую очевидно должно что-то происходить, но ничего не происходит.

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

 

Панель приложения

В панели приложения используется иконка сохранения для добавления в избранное. Для избранного традиционно используется другая иконка.

image

Рекомендация: либо “favorites” — это не избранное, а список сохраненных переводов, либо должна быть другая иконка (звездочка)

Рекомендация: возможно, стоит подумать над тем, чтобы добавить возможность поделиться переводом с друзьями – см. ShareStatusTask. «Поделиться с друзьями» или «отправить перевод» вполне можно вынести в панель приложения соответствующей иконкой.

 

===

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