Tag Archives: user interface

Обзор свежих материалов, август 2010

13 Сен

Этот материал продолжает серию ежемесячных обзоров свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрельмай-июньиюль.

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

In Defense of A/B Testing
Paras Chopra написал отличную статью в защиту метода A/B-тестирования, в последнее время подвергшегося критике со стороны проектировщиков и дизайнеров. Он опровергает три основных претензии, которые касаются в первую очередь зацикливания на не самых эффективных изменениях.

Guidelines for Designing Data Tables
Connie Malamed, автор книги “Visual Language for Designers”, дает серию советов по оформлению таблиц. Она описывает ментальный процесс работы с таблицей и рассказывает о том, как упростить пользователю прохождение по нему.

Making User Interface Elements Difficult to Use By Intent
Статья Jacob Gube, в которой он рассказывает о намеренном усложнении интерфейса в тех случаях, где возможна потеря данных и другие неприятные последствия.

Making the Deal — Supporting Product Demos with User Assistance
Mike Hughes из IBM описывает процесс оптимизации интерфейса демо-версий продукта. Он описывает 4 характеристики, в которых демонстрация должна быть особенно хороша — ценность продукта и ее наглядный показ, внимание к существующим проблемам пользователя, конкурентные преимущества.

User Interface Stack Exchange
Новый сервис вопросов и ответов, посвященный практическим вопросам проектирования интерфейсов. Здесь собраны популярные вопросы и ответы практикующих специалистов на них.

Good Help is Hard to Find
Статья Lyle Mullican описывает несколько способов представления справочной информации в веб-сервисах. Он разделяет помощь на два типа — интегрированную в общий процесс и показываемую отдельно.

Guidelines for user friendly URI Design
Неплохая памятка о создании понятных и читабельных URL от Jacob Gillespie. Статья рассказывает об общих принципах и дает серию полезных советов.

Инструменты

Free Wireframing Kits, UI Design Kits, PDFs and Resources
Одна из наиболее масштабных подборок шаблонов и стенсилов для проектирования и дизайна веб-сервисов и мобильных приложений. Хотя таких коллекций в последнее время появляется все больше, эта статья от Smashing Magazine — одна из наиболее подробных и проработанных.

20 Free Web UI Element Kits and Stencils
Еще одна коллекция шаблонов и стенсилов для проектирования и дизайна. Не так много нового, но может быть полезна.

Паттерны

Liquid Information Navigation – A New Paradigm?
James Kalbach из LexisNexis описывает постепенно развивающийся тренд в веб-интерфейсах — аналог контекстного меню десктопных приложений. Хотя такие меню периодически встречаются вот уже несколько лет, в статье собрана вместе подборка таких примеров.

Dark Patterns — Black Hat, Anti-Usability Design Patterns
Коллекция анти-паттернов проектирования, в которой собраны примеры того как делать не нужно. Примеров пока не так много, но автор сайта Harry Brignull активно публикуется в профессиональном сообществе и вряд ли забросит интересное начинание.

Процесс

All Look Same? A Comparison of Experience Design and Service Design
Jodi Forlizzi сравнивает user experience design и service design с тем чтобы понять, насколько близки эти дисциплины. В статье делаются отсылки к их истории и общему процессу.

Learning from Our Challenge Piles
Отличнейшая статья Michelle Gilmore, в которой она делится своим опытом решения проблем, возникающих при работе с заказчиком работ по проектированию и дизайну. Она описывает 4 типовые ситуации из своей практики и рассказывает о том, как было найдено решение.

Кейсы

Case study — How we made an extra £14 million a year for a travel company
История о том, как был переделан сайт турагентства Sunshine Travel и как это помогло значительно повысить конверсию. Статья описывает основные изменения и процесс работы над проектом.

Designing a Persuasive Video Game
Здорово описанный кейс, рассказывающий о процессе создания обучающей игры. John Ferrara пишет об использовавшихся принципах игровой механики и том, чего они хотели достичь их использованием.

Migrating a Corporate Intranet to SharePoint — A Case Study
Jen Hocko описывает процесс переноса корпоративного интранет-сайта на платформу SharePoint и то, какие задачи решал проектировщик в этом процессе.

Теория

Emotional Design with A.C.T.
Интереснейшая серия публикаций Trevor van Gorp, в которой он описывает психологические основы вовлекающих интерфейсов. Он исследует вызывающий эмоции дизайн и то, как можно создавать его.

Updating Our Understanding of Perception and Cognition
Выдержка из книги Jeff Johnson “Designing with the Mind in Mind”, в которой он описывает процессы восприятия и познания. Крайне полезное чтение, которое позволяет понять как работает и что видит глаз, как происходит процесс чтения и распознавания объектов. Вторая часть статьи —www.uxmatters.com/mt/archives/2010/08/updating-our-understanding-of-perception-and-cognition-part-ii.php.

История

What is a Device?
Выдержка из будущей книги Dan Saffer “Designing Devices”, в которой он описывает краткую историю устройств. А это очень полезно для понимания того, как развивались интерфейсы.

Тренды

5 Creepy Ways Video Games Are Trying to Get You Addicted
Подробное описание 5 распространенных принципов игровой механики от David Wong, которые используются во многих хитовых играх. Статья особенно хороша тем, что в ней приводится масса примеров и отсылок к исследованиям.

Свежие ссылки можно также отслеживать во Friendfeed-ленте User Experience.

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

3 Сен

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

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

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

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

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

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

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

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

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

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

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

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

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

=======

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

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

Прототипирование в Expression Blend + SketchFlow. Часть 2. Основы

3 Сен

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

Начало работы и интерфейс

Все начинается с создания нового проекта. На этом этапе вы можете выбрать, какого типа SketchFlow-приложение вы хотите создать. У вас два варианта: Silverlight и WPF-приложение.

image

Тут может показаться, что SketchFlow позволяет разрабатывать только прототипы Silverlight или WPF-приложений, но это не так, равно как не верно, что на бумаге можно делать только прототипы «бумажных» приложений.

Фактически, вы выбираете контейнер или, если хотите, способ доставки вашего прототипа. Silverlight-контейнер работает в браузере и может быть выложен на сайт. WPF-контейнер представляет собой отдельное Windows-приложение. Это основная разница, тем не менее не стоит забывать, что по собственной функциональности Silverlight != WPF, то есть какие-то нюансы все же могут быть, особенно, если вы выходите за пределы базовых идей SketchFlow и начинаете активно использовать возможности той или иной платформы. (См. также Типы проектов в Expression Blend + SketchFlow)
vs. 

В остальном, все зависит от вашей фантазии и ваших задач. Со SketchFlow вы получаете контейнер — проигрыватель интерактивных прототипов. В этом смысле ничто не мешает разрабатывать прототипы обычных приложений, сайтов или мобильных приложений для любой платформы. По существу, для придания контекста достаточно добавить подходящую подложку и, если нужно, подходящие стили контролов (Expression Blend умеет импортировать psd-файлы). То есть ответ на вопрос “могу ли я с помощью этой штуки сделать прототип iPhone-приложения?” положительный. Хотя, лучше, конечно, если вы сделаете приложение под Windows Phone 7 😉

Я буду придерживаться пути Silverlight-контейнера. Давайте посмотрим на интерфейс Expression Blend для SketchFlow-проекта:

Помимо меню и панели инструментов, в интерфейсе можно выделить 6 основных блоков:

  1. Рабочая область, где разворачивается основное действие,
  2. SketchFlow Map — карта вашего приложения, показывающая, какие есть экраны и компоненты и как они связаны между собой.
  3. Projects — дерево вашего проекта, Assets — заготовки, контролы и т.п., которые можно использовать в прототипе.
  4. Дерево элементов текущего экрана, компонента или контрола + панель для записи анимаций.
  5. SketchFlow Animations — специальная панель для упрощенной записи анимаций для прототипов.
  6. Свойства выделенных элементов — цвет, положение, шрифты и пр.

Прежде, чем двигаться дальше, нужно сделать одну важную настройку, которая впоследствии сильно облегчит жизнь: через меню Tools⇒Options⇒SketchFlow нужно установить размер по умолчанию для новых экранов и компонентов. Например, если вы используете подложку телефона или браузера, то разумно установить размером по умолчанию для экранов именно размер подложки.

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

SketchFlow Map

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

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

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

Например, на картинке выше видно, что есть стартовый экран Login, и есть несколько основных экранов, в каждый из которых вставлено меню в виде компоненты MenuComponent, через который можно попасть на любой из экранов. Во все экраны вставлена подложка WindowComponent, в основные экраны вставлены лента твитов TweersComponent и панель для обновления статуса UpdateComponent.

Схема может быть и более сложной:

или более простой:

.

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

Еще один интересный момент: с точки зрения взгляда на прототипирование как инструмент мышления и анализа, SketchFlow Map сам по себе является инструментом проектирования “потока” приложения и изучения возможных вариантов, в чем-то напоминающим MindMap.

Несколько простых правил по SketchFlow Map:

  1. Прототип всегда имеет стартовый экран, который обозначается зеленым треугольником (см. на картинках выше). Через контекстное меню стартовым можно сделать любой экран.
  2. Экраны обозначаются прямоугольниками, по умолчанию они синего цвета (Navigation).
  3. Компоненты обозначаются скругленными прямоугольниками, по умолчанию они зеленого цвета (Component).
  4. Переходы обозначаются сплошными линиями. Композиция обозначается пунктирными линиями.

Кстати, вы можете задавать свои цвета всем элементам карты (экраны, компоненты, связи) — у вас есть пул из восьми цветов (цветовых тегов), которые вы можете определить через меню Project⇒SketchFlow Project Settings…

Дальше назначит цвет можно через выпадающее или контекстное меню:

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

Сравните:

и .

Двигаемся дальше: экраны и компоненты.

Экраны и компоненты

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

Технически, и те и другие являются обычными UserControl.

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

можно перейти к схеме

.

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

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

  1. В панели управления SketchFlow Map есть необходимые кнопки:
  2. Эти же опции доступны из контекстного меню карты.
  3. Экраны и компоненты, находящиеся на карте имеют выпадающее меню, из которого можно вытянуть новый связанный экран или компонент:

  4. Если выделить в рабочей области или дереве объектов один или несколько элементов, то из контенкстного меню их можно превратить в новые компоненты (Make into Component Screen…).

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

Связи и переходы

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

В данном случае с экрана C можно напрямую перейти на экран X и через вставленную компоненту Navigation на экраны A, B, C (да, формально получается, что на себя тоже можно перейти).

В проигрывателе прототипа (компиляция и запуск — F5) эта совокупность связей напрямую отображается на доступные варианты навигации (переходов):

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

Новые связи на карте могут появляться несколькими способами:

  1. Когда вы вытягиваете новый экран или компонент из существующего, автоматически появляется связь (см. выше).
  2. Из выпадающего меню компонента или экрана можно выбрать опцию Connect an Existing Screen или Insert Component Screen и перетащить связь на нужный объект.
  3. Можно просто мышкой выделить объект и перетащить его на другой — между ними автоматически создастся связь (навигация или композиция).

Это то, что касается ручного создания связей. Есть еще вариант полуавтоматического появления связей на карте: на отдельные элементы (внутри экранов или компонентов) можно навешивать поведения (Behaviors), через которые можно запускать множество интересных действий и, в частности, переходы.

Для переходов даже добавлен специальный пункт в контекстном меню — NavigateTo, через который можно навесить переход по клику на любой из имеющихся экранов или вперед/назад в истории перемещений пользователя по экранам. Если между экранами еще нет связи, она автоматически будет добавлена и в карту.

Поведения мы рассмотрим отдельно в одной из следующих статей.

Импорт

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

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

В случае импорта Expression Blend + SketchFlow предоставляет вам несколько интересных возможностей, каждая из которых обладает своими плюсами и минусами

  • Графические наброски (скетчи). Продумывая наброски, вы сразу выделяете ключевые состояния (экраны) и готовите зарисовки под каждое из них. Состояние = набросок. Далее каждый под из набросков создаете отдельный экран и переносите туда изображение. Потом связываете экраны между собой и получаете первичную версию прототипа. Это также может быть удобным, если вы начинаете с бумажных прототипов или зарисовок интерфейса на бумаге.
  • Графические редакторы. Можно открыть Adobe Illustrator или Photoshop и нарисивать весь набросок в едином файле (или нескольких файлах), разнося разные компоненты и состояния по слоям. Состояние = набор слоев. Дальше можно импортировать этот файл в Expression Blend вместе со слоями.
  • Microsoft PowerPoint. Если вы делаете прототип в PowerPoint в виде последовательностей слайдов, то вы можете импортировать презентацию в Expression Blend. Для каждого слайда SketchFlow создаст отдельный экран и установит связи между ними. Состояние = слайд.
  • Expression Blend. И, наконец, можно создавать все сразу в Expression Blend + SketchFlow. Этот вариант мы рассмотрим в следующей статье.

В качестве примера, см. видео о создании прототипа интерактивного баннера.

Прототипирование в Expression Blend + SketchFlow. Часть 1. Немного истории

3 Сен

Введение

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

В качестве введения в тему и для того, чтобы получить общее представление, предлагаю посмотреть вот это короткое видео (всего 90 секунд!) с обзором текущих возможностей SketchFlow:

А начнем мы со статьи Christian Schormann об истории SketchFlow.

SketchFlow: Немного истории

SketchFlow, инструмент динамичного прототипирования для Expression Blend, наконец официально вышел (от переводчика: статья писалась к выходу Expression Blend 3)! Вы можете скачать триальную версию здесь.

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

Давайте начнем с детских фотографий:

Это прототип, который я написал несколько лет назад на Windows Forms, задолго до появления Avalon/WPF. Даже на этой ранней картинке, хорошо заметен большой редактор карты, названный «Storyboard editor». Серые стрелки отображают навигацию, а красные связи композицию.

А вот другая детская фотография тех же лет. Она показывает редактор скетчей, который позволял очень быстро набрасать в черновике идеи UI:

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

Другая фотография показывает проигрыватель в его самые первые дни:

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

~~~

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

~~~

В один прекрасный день, когда SketchFlow встретился с Blend в первый раз (в наш офис в Миннесоте пришел Bob Pappas):

Это была любовь с первого взгляда, и с тех пор вещи начали очень быстро развиваться, взращиваемые потрясающими командами Blend и SketchFlow в Редмонде и Минессоте. Вот как выглядел плеер в тот период:

Немного спустя мы можем обнаружить фотографии вроде этой:

Следующая фотография сделана вскоре от предыдущей, когда мы смело экспериментировали над различными видами кривых для обозначения связей в карте:

И наконец, мы пришли ко дню выпуска из школы:

Сейчас Expression Blend + SketchFlow доступен для загрузки в составе Expression Studio(От переводчика: Expression Studio также доступна в рамках подписок MSDN, MSDNAA, программ DreamSpark и BizSpark.)

Для нас безусловно будет большой честью, если вы попробуете его в работе. Команды Blend и SketchFlow с нетерпением ждут ваших первых (а также вторых и третьих) впечатлений.

via  Блог компании Microsoft