[#MetroLynch] New Year Gifts

發行項
12/28/2011

Праздник к нам приходит, Праздник к нам приходит… Пятый метро-линч разбирает новогоднее приложение New Year Gifts от ArtMosby.

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

Исправление: сделать панель приложения изначально видимой, перенести about в меню (прозрачность сохранить — иначе фон будет прыгать).

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

Рекомендация: добавить в список образец подарков, например, для себя любимого. В принципе, аналогичная идея применима и к другим праздниками: например, цветы маме на 8 марта. В конце концов, можно рекомендовать купить приложения для Windows Phone :)

Контакты

На странице About (о приложении) для обратной связи приведено несколько возможностей (письмо, отзыв и твиттер):

Кнопки предназначены для совершения действий, поэтому надписи на кнопках лучше формулировать в виде действий (глаголов) и, в любом случае, единообразно. В текущем виде неочевидно, к чему приведет нажатие на кнопку “Twitter” (откроется страница твиттера автора).

Исправление: лучше всего, 1) вместо кнопки написать просто ссылку — твиттер: @artmosby и 2) сделать кнопку «рассказать друзьям», которая будет запускать стандартный ShareTask (ShareLinkTask или ShareStatusTask).

Адресат подарка

И вот, я решил добавить новый подарок... И при заведении подарка я могу указать адресата... Стоп! В том-то все и дело, что не могу!

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

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

Исправление: в первом случае должен быть выбор, возможно, списком. Во втором случае это не должно быть сделано в виде текстового поля — просто текст, причем если необходимо как-то выделить, это можно сделать размером шрифта, цветом (например, акцентным) или как-либо еще, но никак не в виде textbox.

Переход к людям

При нажатии на человека в списке адресатов подарков не происходит никакой реакции, а сам переход выполнен просто в виде смены одного экрана другим:

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

Исправление: элементы списка должны реагировать на нажатие, для элементов списка рекомендуется использовать небольшие наклоны (tilt-анимация):

Рекомендация: для погружения в детали также следует использовать соответствующие переходы (continuum-анимация):

Замечание: для обоих примеров — см. как работает outlook.

Ввод данных

Страницы ввода адресатов и данных о подарках прерывисто «прыгают» при начале ввода (установке фокуса на текстовом поле). Возможно, это связано с наличием изображения.

Рекомендация: убрать со страниц ввода данных фоновое изображение.

Второй важный момент — это процесс ввода данных, который довольно неудобен, особенно это заметно при добавлении подарка. Чтобы перейти к следующему полю, мне нужно нажать где-то вне текущего поля, после чего нажать на то, которое мне нужно.

Исправление: сделать возможность быстрого переходя от одного поля к другому прокруткой всей области ввода и переход к следующему полю по нажатию return (см. как работает добавление новых контактов в people).

Рекомендация: также стоит явно указать, что цена по умолчанию — 0 руб. Для этого надо вписать это значение в поле с ценой и выделять его полностью, при переводе фокуса на поле, чтобы его можно было легко изменить без необходимости выделения или посимвольного стирания.

Дизайн

Выступающие хвосты слева

На некоторых экранах панорамы с левой стороны страницы выступают окончания предыдущей страницы:

В панораме должен выступать справа только фрагмент следующей страницы.

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

О приложении

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

В Windows Phone рекомендуется выравнивать весь контент по левому краю для создания явной иерархии. В данном случае два способа выравнивая явно конфликтуют между собой.

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

Светлая тема

Приложение не вполной мере переопределяет дефолтные значения цветов для системных контролов (поля ввода в активном состоянии, неактивные чекбоксы, панель приложения):

По умолчанию все системные контролы автоматически подстваиваются под выбранные пользователем тему и акцентный цвет (см. мою статью «Дизайн приложений для WP7. Темы и акценты»).

Как только в своем приложении вы решаете внедрять собственную тему, независимо от выбора пользователя (это не плохо само по себе!), на ваши плечи также ложится и контроль, что приложение будет выглядеть одинаково хорошо при всех сочетаниях тем и акцентов (см. например, статью “Windows Phone Mango Custom application Theme Step by Step”).

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

Карточка человека

На странице адресата для подарков приведен список подарков, которые необходимо купить и упаковать. Иконки для управления подарками выстроены в виде таблицы с общим заголовком для всего списка («куплен» и «упакован»):

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

Скорее всего, проблема изначально растет из неполной очевидности иконок (что делает галочка?) и далее необходимости добавления подписей, которая столкнулась с тем, что слово «упакован» слишком большое.

Исправление: я бы исходил из начально проблемы: как обозначить покупку подарка? Очевидно, деньгами или корзинкой. Как обозначить деньги? Монетами, купюрами, символами валют:

В таком варианте (или любом похожем) нет явной необходимости добавлять подписи (тут важно помнить, что символ рубля является локальным для России).

Рекомендация: если подписи все же нужны, то размер надписей необходимо уменьшить, сравните экраны с адресатом и общим списком подарков (оба в одном масштабе):

Выравнивание и отступы

Продолжая традиционную тему отступов и выравниваний... Хотя в данном приложении с выравниванием по одной линии по левому краю все более-менее хорошо, все же тут тоже есть над чем поработать (см. также несколько комментариев ниже).

Во-первых, это внутренние текстовые отступы в списках — они разные для разных элементов:

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

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

Во-вторых, это вертикальные отступы между элементами списка и внутренними строчками. Первые — маленькие, поэтому приходится вводить вертикальные линии. Вторые — несбалансированы, поэтому заголовок слегка повисает в воздухе:

Исправление: убрать линии и увеличить немного отступы между элементами списка:

Это же сглаживает проблему с внутренними отступами.

В-третьих, это висящие посередине элементов списка кнопки для управления состояниями подарков:

Все бы хорошо, кроме одного момента — заголовок (название подарка) тяготеет над кнопками. Что особенно хорошо видно при длинном названии: нижняя граница текста и верхняя граница кнопки пересекаются.

Рекомендация: сгладить эту проблему можно очень просто, убрав необходимость такого «перевешивающего» выравнивания. Для этого достаточно атрибуты подарка написать в одну строчку, кстати, пояснения можно тоже убрать, так как они понятны из контекста:

Фон

В качестве фона, скорее всего, используется 32-битное изображение, хотя по умолчанию приложения на Windows Phone работают в 16-битном графическом режиме. В результате появляются хорошо заметные артефакты в градиентах:

Исправление: либо использовать 16-битную графику, либо явно прописать в манифесте приложения необходимость использования 32 бит (см. например, заметку “Enable 32-bit Color if Your Application Supports It”).

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

Время до Нового года

Помимо работы со списками подарков, приложение радует (и мотивирует) пользователя счетчиком оставшихся дней до Нового года. Тут интересно несколько аспектов.

Во-первых, я снова про выравнивания:

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

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

Во-вторых, хотя, безусловно, я тоже оценил маневр с елочкой в фоне и временем, на практике это забавно, но не функционально. То есть считывать время, оставшееся до Нового года, просто напросто неудобно.

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

Над выравниванием календарика здесь, конечно, надо еще подумать.

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

Упаковка некупленных подарков

Вот оно! Настоящее новогоднее волшебство! Конечно, можно предположить, что подарок уже может иметься из каких-либо других источников, давно куплен или вообще сделан своими руками, но... Есть в этом что-то неправильное:

Рекомендация: подумать над соблюдением логики «наличие подарка -> упаковка подарка», особенно, если указана цена подарка, отличная от 0.

Новые подарки в списке подарков

Насколько я могу судить, свеже добавленные подарки не сразу попадают в список — требуется какое-то дополнительное обновление.

Исправление: отследить момент обновления списка.

Редактирование подарков

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

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

Перебор бюджета

Приложение спокойно позволяет перебрать отведенный бюджет:

Вообще говоря, понятно, что на счастье не экономят, но, возможно, с этим все же стоит что-то делать...

Рекомендация: ввести контроль расхода средств с мягкой нотификацией о перерасходе относительно отведенного бюджета (его, кстати, изменять тоже нельзя!).

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

===

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

p.s. Все мои оценки и рекомендации субъективны и не являются 100% верными решениями – все нужно тестировать и проверять на живых пользователях :)

Comments

Anonymous
December 27, 2011
Про tilt-анимацию - выглядит, конечно, очень красиво, но на сколько-нибудь большом списке это все начинает жутко тормозить на старых устройствах (вроде HD7).
Anonymous
December 27, 2011
А твиттер тормозит на HD7? Там в списке твитов есть как раз tilt-анимация при нажатии.

共用方式為