Tags: Форма

Дизайн форм с точки зрения сервиса

Продолжаю читать «Exceptional Service, Exceptional Profit»

Если взять любого интерфейсного дизайнера и показать ему какую-нибудь форму, он тут же начнёт нудеть, что полей много, что это сложно, что это фильтрует пользователей, что интерфейс зло. И будет прав.

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

Как собирать информацию о предпочтениях клиентов и не делать им мозги

Интернет подвигает собирать слишком много информации. Задавать клиентам вопросы с помощью онлайн-форм очень просто, искушение навалить поля горой велико. Вот некоторые принципы, которые помогут преодолеть искушение:

1. Если вы собираете конфиденциальную информацию, объясните зачем она вам нужна. Ясно и подробно.

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

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

4. Если вы сделаете поля необязательными, но объясните зачем их заполнять, скорее всего пользователи вас послушают. При этом количество бесполезных значений вроде телефона 999-555-0505 или почты lateralligator@getoutofmyface.com.usa.xxxy сократится.

5. Постарайтесь использовать живой чат везде, где это возможно. Расположите в заметном месте номер бесплатного телефона, начинающегося на 800. Это поможет не напугать длиной формы тех, кому она не нужна Испугавшись они могут уйти.

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

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

Крестик

Нашел в гайдлайнах Макоси хорошую формулировку:


OS X is founded on the understanding that people use computers to create and experience the content they care about. On a Mac, people are free to focus on their content because OS X performs many of the routine app-management tasks that users shouldn’t have to handle. As you consider how your app fits into the OS X environment, it’s instructive to see how this perspective pervades every ingredient of the Mac experience.

OS X includes many features that relieve users of common app-management tasks. These features instead help them concentrate on the tasks they want to accomplish. For example, popovers appear when users need them and disappear when users are finished with them (in effect, popovers manage themselves).
https://developer.apple.com/library/mac/#documentation/UserExperience/Conceptual/AppleHIGuidelines/Characteristics/Characteristics.html

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

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

Домашка. Аккумуляторы

aderese пишет:


привет, коля.

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

нужно сделать блок (на сайте) подбора аккумуляторной батареи для автомобиля. то есть, на данный момент имеются четыре поля, в которых пользователь выбирает:
1) автомобиль
2) модель
3) двигатель
4) год

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

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

я тебе прекрепил изображения, чтобы было понятно о чем я:
001 — начальное состояние формы
002 — конечное состояние формы

пока :-)

001


002

 


Добавлю, что аккумуляторы производит фирма Веста http://www.tdwesta.ru/.


Ваши задачи

1. Подумать и описать (в виде персонажей) возможных пользователей формы.
2. Восстановить текущий сценарий работы с формой по присланному описанию.
3. Исправить сценарий, если требуется.
4. Нарисовать форму, которая бы проходила сценарий из (3).

То есть, в результате должно получится три текстовых артефакта и одна картинка.


Моё решение


Для решения первого пункта задания я попытался вспомнить все известные мне типы водителей:
— Тупая блондинка на Матизе.
— Охуевшая тупая блондинка на Лексусе.
— Дедушка в кепочке на Пятёрочке.
— Мать семейства на Ц классе.
— Бедный отец семейства на Семёрке.
— Богатый отец семейства на Каренсе.
— Сопляк на копейке.
— Спиди рейсер на Субаре.
— Ара на тонированной Шахе.
— Толстопуз на джипе.
— Молодая телка на разъебаной девятке (откуда эти берутся в вообще не знаю).
— Папина дочка на Кие Рио.
— Богач на Мерседесе.
— Жена прокурора на новой Ауди А4.
— Представитель среднего класса на Форде.
— Парниша на Хьёндае.
— Быдло на Четырнадцатой.
— Бизнес леди на Мазде.
— Миллионер в кабриолете.
 
Часть этих людей или не имеет доступа в интернет (например дедушка на Пятёрочке) или не любит и не хочет там что-то искать (Тостопуз на джипе). 
Другая часть срать хотела на все эти аккумуляторы, так как их ей (этой части) меняют на сервисе. Сюда входят разные богачи.
Есть еще часть людей, которые не будут покупать эти акки по причине отсутствия средств (Сопляк на копейке).
Ну и часть не знает что такое аккумулятор (Папина дочка на Кие Рио).

Так что список потенциальных пользователей формы мне видится такой:
— Бедный отец семейства на Семёрке.
— Богатый отец семейства на Каренсе.
— Представитель среднего класса на Форде.
— Парниша на Хьёндае.

Богатый отец семейства и средний класс — это одно и тоже скорее всего. А так как форд у представителя среднего класса обычно новый, то менять там аккумулятор нужно не так часто.

Остается бедный отец семейства и парниша. Возьмем парнишу, как ключевого персонажа, мне кажется он больше будет доверять интернету, да и на рынке покупать аккумулятор полениться. Совершенно случайно (правда) в эту категорию попадаю я сам. Только у меня не Хьёндай.

1. Персонаж

(фото спизжено с просторов)

Итак у Макса пяти летний Хьендай Таганрогского Авто Завода. На той неделе Макс заметил, что аккумулятору скоро пиздец (белые разводы на крышке), что не удивительно, так как его еще ни разу не меняли. Каким-то образом Макс попадает на страницу с сабжевой формой.

2. Текущий сценарий
Прочтя заголовок формы Макс понимает, что эта форма поможет ему выбрать нужную модель аккумулятора.

Макс указывает марку своего авто — Хьёндай, модель — Акцент. Так как для этой модели системе известен только один вид двигателя, Макс выбирает в поле выбора двигателей «единственная возможная конфигурация». И, также, выбирает единственный доступный год выпуска.

На поле под формой появляются рекомендуемые аккумуляторы.

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


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

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

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

Макс указывает марку своего авто — Хьёндай, модель — Акцент. Так как для этой модели системе известен только один вид двигателя, то о нем не спрашивают. Также, так как система знает только об одном диапазоне годов выпуска он выбирается автоматически.

То есть, сразу после выбора модели на поле под формой появляются рекомендуемые аккумуляторы.

Макс выбирает подходящий аккумулятор ориентируясь по краткому описанию и цене.

Макс покупает понравившийся аккумулятор воспользовавшись возможностью покупки, предоставленной возле каждого аккумулятора.

Сценарий 2
Хотелось бы еще добавить один сценарий.

Если система может получить информацию о том, каким авто владеет Макс (например из запроса поисковой системы), то она автоматически выбирает марку, модель и другие параметры.
 
4. Прототип
Основное замечание к исходной форме в том, что она заставляет Макса выбирать модель и марку из длинных и очень однородных списков, что весьма непросто для среднестатистического человека. Выпадающие меню, также, скрывают доступные пункты и Максу приходится производить действия, чтобы просто узнать что там есть. Это пример скрытых функций.

Исправленный сценарий и исправленная реализация дали такой вариант:

Исходное состояние
browser-Acc1



Состояние после выбора параметров
browser-Acc2
* Все ссылки в левой части должны быть подчеркнуты пунктиром. Если Макс выбирает марку, которую он уже выбирал, то форма сразу должна показывать его старый выбор.


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

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

---

P. S.
Прочтя все еще раз я подумал, что можно еще немного изменить сценарий так, чтобы при выборе марки выбиралась бы и модель и двигатель и год (первые в списке). То есть, чтобы клика было достаточно для получения хоть каких-то результатов. Так же на первом экране стоит разместить популярные аккумуляторы (если сценарий с определением того, что ищет Макс не сработает), но так, чтобы они не мешали сделать уточнение. Это уже предмет тестирования, я думаю.



Комментарии скрываются до вечера понедельника, когда я представлю своё решение и прокомментирую ваши ответы.

Напоминаю, что домашки выходят по пятницам, присылайте свои задания на kolan@ksoftware.ru и, если задание окажется интересным, оно будет опубликовано в одну из пятниц.

Домашка. Программа опроса касс

talla2k (он же GanibalLector) пишет:



Разработал софт для удаленного обмена с некими терминалами. Т.е.
хозяин(директор) сидя на Лазурном берегу может соединиться со своими
терминалами и видеть все движение(обычно это продажи товаров и т.д.).
В виду того, что директора обычно люди занятые...и им некогда
просиживать штаны возле компа, сделал 2 режима работы.
Первый (ручной) :
ручками выбирается адрес удаленной точки, нужное действие и
нажимается кнопка "Звонить".
Второй (автоматический):
заранее создаются задания в БД (где указываются адреса точек, нужные
действия и время выполнения). Обычно это все создается в 1Се. Соответственно,
при наступлении нужного времени программа сама позвонит на нужные точки и
заберет/передаст данные.

Как-то так. Если инфы мало, сообщи. Распишу подробнее.

Меня интересует интерфейс. Я, в отличаи от тебя, книг по интерфейсам
не читал. Поэтому жду критики в свой адрес ! Если запостишь в
"Домашку", то буду премного благодарен. Хочу выслушать мнения народа
))

Заранее спасибо.



 



Collapse )

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

UPD

Я огорчен, что до сих пор нет ни одного ответа, почему?


Мое решение

К сожалению эта домашка — пример случая, когда исправлять ошибки

Ganiball1




бесполезно, нужно все переделывать.





Попробуем представить пользователя программы. Конечно это не жирный босс, который круглый год лежит на Мальте и жрет омаров. Скорее всего это ЧП или владелец мелкого ООО, у которого есть несколько точек, контролировать которые лично физически невозможно.

Я думаю его зовут Игорь и ему 37 лет.


Теперь можно придумать сценарии

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


-считать товары (вся номенклатура торговой точки);
-считать дневной отчет (все продажи на сейчас);
-считать отчет с накоплением ();
-считать остатки (выборочно по группе...или с заданным количеством);
-записать товары (новый товар, изменить цену,
изменить\добавить\уменьшить количество, удалить товар);
-печать комментария (послать комментарий кассиру...типа "Маша, измени
ценник на такой-то товар");
-время рабочего дня (время начала работы и конца);
-лента продаж (полная информация о всем раб.дне. Номер чека, время,
номер кассира, сумма чека, номер дисконтной карты, позиции чека(код
товара,цена,скидка,наценка и т.д.))

 


Мне видятся такие сценарии.


Просмотр номенклатуры точки

Игорь открывает программу, находит нужную точку и просматривает её номенклатуру.


Получение дневного отчета

Игорь находит нужную точку и просматривает дневной отчет по ней.


Печать комментария

Игорь находит нужную точку, пишет комментарий кассиру видя историю переписки


Добавление модема

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


Грубый прототип интерфейса, реализующего сценарии получился такой:

В главном окне есть две области — список торговых точек и область отчетов.

GaniballProto1




Игорь просто выбирает нужную точку слева и просматривает отчеты справа. Когда программе необходимо получить данные появляется модальное окно.
GaniballProto2

Модемы добавляются в соответствующем меню (пример — сборщики почты в Яндексе) и система сама решает как их использовать.


Наличие баз данных, колбеков, статусов и прочего Игоря не ебёт, а интерфейс его этим и не грузит. Игорь просто видит свои торговые точки и просто смотрит как у них там дела.

Комментарии скрываются до вечера воскресенья, когда я представлю своё решение и прокомментирую ваши ответы.

Напоминаю, что домашки выходят по пятницам, присылайте свои задания на kolan@ksoftware.ru и, если задание окажется интересным, оно будет опубликовано в одну из пятниц.

Коммутация контактов во Фригарфе. Окончательный вариант







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

Домашка. Модальная форма

Артем Горбунов со своими Советами как мысли читает.

Сегодня домашка — сценарий.

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

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


Вот заготовка формы, если нужно.



Комменты скрываются до воскресенья. В воскресение я выложу свой вариант и прокомментирую ваши. Удачи :)


Решение

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

Вот моё решение (я не подсматривал, честно).





Объяснение.



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


Следующая домашка сегодня.

Что для вас означает клик по крестику в такой форме?

Poll #1495436 Что для вас означает клик по крестику в такой форме?

Да.
1(3.6%)
Нет.
9(32.1%)
Отъебитесь от меня со своими вопросами.
18(64.3%)

Редизайн формы выбора расписания для показа рекламы 2

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


Как и в первом вариант, в этом форма усложняется по мере надобности.

Если пользователю нужно просто указать время и дни, то он использует простую форму. На этой форме также есть ссылки со стандартными расписаниями. На квадратики можно тыкать, диапазон выделить нельзя.




Если рекламщик изощрен, то он может воспользоваться полной формой.



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


Обсерайте, я это люблю. :) Ваших комментариев, Алексей, жду особо.

Редизайн формы выбора расписания для показа рекламы

Не все в жизни просто. Не всегда можно сделать простую и понятную форму. В таких случаях можно сделать форму постепенно усложняющейся.

Если сразу вывалить все что есть, как это сделано в форме выбора расписания для показа рекламы в продукте SmartPPCEVO фирмы orbitscripts:




Некоторые слабохарактерные пользователи могут опустить руки и уйти к Яндексу.

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










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

Вот фрагмент формы где будет появляться вышеописанная:




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


UPD

Решение Гугла кажется сочетает недостатки моего решения и решения Орбиты. Форма такая же большая и показывает ячейки для каждого часа




Но ячейки не редактируемые, а время задается из выпадающего меню, как у меня.




Зато Гугл красиво поступил с часами.


Решение Яндекса проще. Но не такое функциональное.



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