Tag Archives: forms

Веб-формы: понижаем когнитивную нагрузку

3 Сен

Дизайнов три, а форма одна
Сможете ли вы сходу сказать, которая из этих форм легче воспримится пользователем? В этом посте я приведу рекомендации по дизайну веб-форм, с целью облегчения когнитивной нагрузки
Рекомендаци основаны на результатах теста, который провели в 2006 году и отчето котором размещен на сайте uxmatters. Тест был построен на технологии считывания движений глаз пользователя (eyetracking). Авторы теста получили весьма полезные данные. Они признают, что немного слукавили, так как им пришлось предъявлять веб-формы пользователям не в реальном контексте веб-страницы, а изолированно, чтобы изучать фиксированние глаз именно на форме, а не на других элементах сайта. Синими окружностями показаны фиксирования глаз, линиями — передвижения взгляда.

Расположения названия текстового поля

Названия с выравниванием по левом краю расположенные над текстовыми полями Названия выровнены по левому краю и расположены слева от текстовых полей

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

Выравнивание названия

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

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

Начертание названий

Жирные названия сверху текстовых полей
Пользователям дается прочтение жирных названий тяжелее, чем обычных. Дело в том, что контрастные границы текстовых полей создают резонанс с жирным начертанием слов, что в результате увеличивает когитивную нагрузку (на 60% больше времени требуется глазу, чтобы передвигаться от названия к самому текстовому полю). Если используете жирные названия, то убедитесь, что текстовые поля не имеют контратсных границ.

Выпадающие меню

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

Заголовок выпадающего меню

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

=======

http://uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php

Интерпретация Рехимкулова Рината

Весь интерфейс iPhone 4 в одном PSD-файле

17 Авг

Не Xcode единым — макетировать интерфейс iPhone-программы можно не только средствами Apple, привычный Photoshop выглядит более чем достойной альтернативой. А если вы нацелились на iPhone 4 с его роскошным Retina Display, то здесь никак не обойтись без последней работы студии Teehan+Lax — втиснутые в гигантский PSD-файл размерами 4074 × 2986 точек все базовые элементы графического интерфейса iOS, перерисованные под экранные 640 × 960 пикселей iPhone 4.

Скачать iPhone 4 GUI PSD (Retina Display) (20,8MB).

Объем собственно файла получился не менее устрашающим — в разархивированном виде iPhone_4_GUI_PSD_Retina_Display.psd занимает на жестком диске 62,7 Mb. Распространяются эти шестьдесят два целых и семь десятых мегабайта совершенно бесплатно, но с предложением заплатить за титанические усилия дизайнеров Teehan+Lax сколько не жалко. На данный момент времени среднестатистический взнос «сколько не жалко» составляет 10 долларов и 55 центов.

via DeepApple.ru

Обзор свежих материалов, май-июнь 2010

23 Июл

Юрий Ветров, пользователь сайта Хабрахабра, опять подал нам новую порцию обзоров на новые инструменты, материалы и практики по юзабилити. Спасибо ему огромное!

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

Методы и практики

Wireframe Showcase
Коллекция примеров wireframes. Хотя по масштабности ей далеко до коллекции №1, в ней каждая схема страницы совмещена с итоговым дизайном — это помогает лучше понять особенности процесса проектирования.

Sketches and Wireframes and Prototypes! Oh My! Creating Your Own Magical Wizard Experience
Traci Lepore подробно описывает возможные уровни проработки интерфейса от скетчей и wireframes до интерактивных прототипов и дизайна. Статья хорошо показывает, как вместе с затрачиваемым на продумывание интерфейса временем растут его продуманность и уменьшаются «белые пятна». На эту же тему недавно написал Tyler Tate, включив в статью небольшой полезный кейс из практики с примерами готовых документов и графиком их создания.

Designing for Delight (презентация Giles Colborne)
Giles Colborne из компании CXPartners описывает процесс создания дизайна, который вызывает у пользователя ощущение восторга. Причем речь идет не о модных визуальных решениях — для этого важнее предвосхитить ожидания или помочь в проблемной ситуации.

How to Engage Customers in Your E-Commerce Website
В своей статье для Smashing Magazine Rung Andras рассказывает о пользовательских рейтингах в интернет-магазинах — как лучше собирать их, отображать на страницах сайта и учитывать в специальных предложениях.

The Question Protocol — How to Make Sure Every Form Field Is Necessary
Caroline Jarrett, автор книги «Forms that Work: Designing Web Forms for Usability» описывает хороший способ сокращения полей форм. Речь идет об опроснике для заинтересованных лиц компании-владельца сайта, который позволяет определить, кому именно нужны предоставляемые пользователем данные и можно ли отказаться от их части.

The Small Print — Writing UI Instructions
Connie Malamed дает несколько советов о том, как стоит писать краткие поясняющие тексты в интерфейсах. В первую очередь это касается форм и системных сообщений.

Not to Prime, is a Crime!
Jodie Moule из компании Symplicit рассказывает о методе исследования пользователей «priming». В ходе него участвующие в исследовании создают коллажи, описывающие их повседневные дела, что помогает лучше понять контекст и особенности их жизни и работы.

Читать далее

Программа для проектирования сайтов и интерфейсов на Айпаде

7 Июн

Пользователь nikolaz создал программу, которая позволяет создавать прототипы прямо со своего iPad. Что представляет из себя программа, и какие «плюшки» в ней есть лучше прочитать со слов автора.

image
Сегодня я хочу рассказать вам про свою программу для Айпада — СкетчиПад (ссылка в Айтюнссайт программы). Да, я знаю, что Айпад все еще не продается официально на территории России, но во-первых думаю многие хабраюзеры уже обзавелись этим гаджетом у «неофициальных» поставщиков, а во-вторых уверен, что здесь много пользователей из стран официальных продаж.

Итак, что же это за программа? СкетчиПад — это программа для быстрого проектирования веб-сайтов и интерфейсов приложений «на коленях». В текущей версии в распоряжении пользователя 56 шаблонов, из которых вы можете «собирать» сайты и интерфейсы. Большинство шаблонов динамические, т.е. изменяют свой внешний вид в зависимости от ввода пользователя, лучше всего это проиллюстрирует видео:

Из других «вкусностей»:
— выравнивае по гайдлайнам
— управление цветами обводки/заливки/текста
— управление размером шрифта
— экспорт в Фотоальбом, ПНГ и формат Бальзамик Мокапс популярный в кругах разработчиков
— опции заморозки и клонировая шаблона
— возможность создать ссылку из одного документа на другой

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

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

Желающим написать свой обзор и имеющим американский Айтюнс аккаунт — свяжитесь со мной по адресу app@sketchyapp.com, я вышлю вам промокод.

Надеюсь моя программа поможет вам в вашей работе!

Да, чуть не забыл, в день начала официальных продаж Айпада в России обязательно сделаю распродажу по $0.99. Сейчас она стоит $4.99 — примерно как кружка пива в среднем московском заведении.

Прекратите спрашивать с меня подтверждение

26 Май

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

У пользователя G_Z решил написать про то, что у него наболело.

Подтверждение пароля

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

Дублирование элемента подразумевает существенную важность вводимой в него информации.
Что такого важного в пароле? Что самое страшное случится, если при регистрации ввести его неверно?
Коллапс, повсеместный конец света, газа и горячей воды?
С учётом того, что пароль обычно присылают на указанный e-mail, — ничего страшного: ошибся, получился плохой — поменяю, лень менять — найду в письме.
Не прислали — всегда могу сменить, был бы исправный e-mail.

Видели ли вы случаи дублирования полей ввода иной информации?
«Имя / Имя», «О себе / О себе». Не встречалось?..
Ах да — e-mail. Ещё один пережиток и традиция, но даже он важнее пароля.
Указать неверный e-mail гораздо более чревато, нежели придумать «некрасивый» пароль.
Но требовать вводить его дважды — ещё больший бред, нежели пароль.

Тут нужно чуть свернуть с темы пароля и коснуться дублирования на примере e-mail.
Давно ли вы вводили последний раз основной e-mail руками?
Если разработчик формы не стал мудрствовать лукаво и дал полю формы «стандартное» имя «email» — адрес наверняка подскажет браузер.
Даже если ввели руками, вводите ли второй раз руками?
Повышается ли внимательность ввода при дубле? Наоборот: вводишь и материшь разработчика, его родственников и канарейку.
Думаешь: «ладно, вобью быстро руками» и тут же опечатываешься, вводя второй раз. Знакомо?
Потрачено время, нервы, толку — ноль.

Что пишет тебе форма «повышенной юзабильности» когда значения дублированных полей не совпали?
Правильно — «не совпадает».
Удивила, блин. Помогла.
Вот теперь сиди, ищи где и чего ты не так вбил. Где правильное значение? Где опечатка?
Нашёл? Вбивай по-новой, или копируй правильный вариант.
В e-mail ещё можно разглядеть ошибку, а пароль они скрыли, заботясь обо мне — вбивай оба снова, авось рука не дрогнет.

Пароль скрывают.
Кругом шпионы, всем страшно нужны мои пароли.
Хорошо, подкормим паранойю и оставим скрытие пароля по умолчанию, дабы не нервировать непривычным поведением годами выдрессированного пользователя.
Но дайте же мне увидеть, что я ввёл, если у меня за спиной никто не стоит и пять камер не направлены мне в монитор!

Чего хотят от меня добиться, делая две вещи: скрывая вводимое значение и предлагая вводить его дважды?
Улучшить сложность пароля? Чёрта с два.
Перед человеком ставят задачу ввести сложную, а я надеюсь вы используете сложные пароли, последовательность. Вслепую. Дважды.
Подготовка к сапёрному ремеслу, не иначе.

Придумать в такой ситуации сложный пароль нереально. Вернее, придумать — реально более чем, повторить и запомнить нереально.
Что вынуждает либо вводить давно придуманный и используемый пароль, либо придумывать его в ином месте — например, текстовом редакторе — и копировать в поле.
Ну, либо пользоваться менеджером паролей и копировать оттуда, в два места.
Разработчики формы проверяют моё умение копировать текст в поля?

Помогло скрытие? Нет, набивали в редакторе и копировали.
Увеличилась сложность? Нет, вбивал вслепую попроще, чтобы не ошибиться.

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

Ни одна из предполагаемых выгод не оправдалась.
Фарс.
«Как у всех». ©

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

Много ли нужно, чтобы кардинально изменить ситуацию?
Нет:
1. убрать дублирование поля;
2. дать возможность увидеть введённое значение.

Всё! Никаких нервов, сложные пароли, довольные процедурой регистрации пользователи.
Это же очень просто, даже работы становится чуть меньше — не нужно сверять два значения.

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

Новые шаблоны для форм в Google Docs

24 Май

Google добавил 24 новые темы оформления форм в Google Docs. При создании тем использован Google Font API.