Tag Archives: методы юзабилити

Обзор свежих материалов, август 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.

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

19 Авг

И снова Юрий Ветров, пользователь сайта Хабрахабра и руководитель UI Modeling Company, сделал подборку интересных материалов за июль месяц. Для пользователей Хабрахабр — не забудьте перейти на его профиль и поднять кармы.

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

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

Creative ways to solve usability problems
David Travis из компании Userfocus предлагает унифицированный подход к решению проблем в интерфейсе, найденных во время юзабилити-тестирования и эксертной оценки. Он называется SCAMPER согласно основным принципам.

Инструменты

User Interface Design Framework
Коллекция шаблонов и стенсилов для Adobe Illustrator, которая содержит ключевые элементы интерфейса и навигации, а также часто используемые иконки.

How to prototype interactive iPad applications in 30 minutes using keynote
Amir Khella подробно рассказывает о том, как можно использовать iPad-приложение Keynote для проектирования интерфейсов. Статья подробно описывает процесс и сопровождается небольшим скрин-кастом. Travis Isaacs описал процесс в виде презентации, а Luke Wroblewsky подготовил обзор материалов по теме.

Free Full Layered Facebook GUI PSD Kit
Компания SurgeWorks подготовила шаблон для Adobe Photoshop, который содержит основные элементы интерфейса Facebook. Прямая ссылка на скачивание — http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/07/facebook-gui-psd-kit.zip (ZIP, 6,5 МБ).

Mobile Prototyping Tools
Sheetal Dube из Evantgage Consulting пишет об инструментах для проектирования мобильных интерфейсов. Первая статья из серии посвящена Axure и его полезности на всех этапах процесса проектирования.

Touch Notation by Matt Legend Gemmell
Matt Gemell создал простую и понятную нотацию для проектирования тач-интерфейсов. Она позволяет описывать сложные жесты без перегруженных служебных иллюстраций и легко масштабируется до небольших размеров. Прямая ссылка на скачивание — http://mattgemmell.com/files/touch_notation.zip (ZIP, 200 КБ).

Windows Phone 7 UI Templates, Screenshots & Guidelines
Коллекция дизайн-шаблонов и руководств по интерфейсу для новой мобильной ОС Windows Phone 7. Хотя платформа еще в разработке, уже доступно достаточное количество полезной информации о ее интерфейсе. Особенно полезны официальная коллекция материалов для проектировщиков и дизайнеров инабор из 28 шаблонов для Adobe Photoshop (ZIP, 88 МБ).

Паттерны

UI Patterns — Symbian Developer Community
Библиотека паттернов, использующихся в интерфейсе мобильной ОС Symbian^3. Хотя вики проекта обновляется не очень активно, в ней собрано достаточно полезных материалов.

Процесс

Notes from The ROI of UX — Proving the Value of User Experience Design
Бывший менеджер по продажам Erin Lynn Young делится своим опытом работы с клиентами, которые она применяет на своей новой работе проектировщика. В статье масса полезных советов о том, как правильно подавать и продавать интерфейсные услуги.

Design Is a Process, Not a Methodology
Pabini Gabriel-Petit написала один из лучших и наиболее подробных обзоров процесса проектирования. Статья в деталях описывает три ключевых этапа — предварительные исследования, проектирование и дизайн, поддержку разработки — и основные методики для каждого из них.

Recruiting Better Research Participants
Jim Ross дает ряд советов о том, как подбирать респондентов для юзабилити-тестирования и других исследований пользователей. В статье дается масса полезных советов по всем частям процесса.

Design Better And Faster With Rapid Prototyping
Неплохой обзорный материал Lyndon Cerejo о процессе работы над страницами интерфейса — от скетчей до интерактивных прототипов. Хотя сама тема уже разжевана не один десяток раз, в этой статье дана хорошая выжимка для начинающих.

12 emerging best practice for adding user experience work to agile software development
Jeff Patton рассказывает о своем 10-летнем опыте работы над интерфейсами в agile-процессе разработки. Статья дает серию полезных советов о том, как начать работать в таком режиме и постепенно совершенствовать его.

Кейсы

Designing the Hilo User Experience
Отлично иллюстрированный кейс о том, как проектировался экспериментальный просмотрщик изображений Hilo. Идея продукта сама по себе вряд ли интересна, зато детальное описание процесса работы над ним снабжено тонной примеров постепенного развития концепции — от первых скетчей до работающего прототипа.

Quotes from the User
Коллекция забавных высказываний пользователей, произнесенных во время юзабилити-тестирований и других исследований.

Теория

Achieving and Balancing Consistency in User Interface Design
Michael Zuschlag пишет о целостности интерфейса — он должен быть максимально унифицированным для того чтобы пользователю не приходилось изучать его заново на каждой новой странице продукта. Автор использует термин «наименьшее удивление» в качестве основного посыла статьи.

The Real Life Social Network (A Presentation by Paul Adams)
Paul Adams из Google описывает результаты масштабного исследования поведения пользователей в социальных сетях — в каких группах и как интенсивно общаются их участники. Масса интересных фактов, которые пригодятся при проектировании социальных интерфейсов.

The Dirtiest Word in UX — Complexity
Хорошая обзорная статья Francisco Inchauste на тему сложности интерфейсов — нормальное ли это явление или с ним нужно бороться. Он рассказывает о разнице в задачах, культурах и подходах в управлении сложными продуктами.

История

Know Your Icons — A Brief History of Computer Icons
Хорошо иллюстрированная примерами история развития пиктограмм в интерфейсах. Начиная с Xerox Star — первого коммерческого продукта, использующего концепцию GUI — статья показывает развитие метафор и стилистики в иконографике.

Inside the Mundaneum
Красиво поданная и отлично иллюстрированная история бельгийца Paul Otlet, автора идеи фасетной классификации. Буклет рассказывает о его проекте Mundaneum, который многие называют прототипом интернета.

Тренды

UX Storytellers
Регулярно обновляемый блог, который собирает интересные материалы по теме storytelling из разных отраслей. Этот подход сейчас активно продвигается в интерфейсном сообществе, так что многое окажется полезным в работе.

Checkout Abandonment on the Rise
Исследовательская компания Forrester провела опрос пользователей интернет-магазинов, в котором они рассказали об основных причинах брошенных корзин. Наиболее популярны 5 причин — высокая стоимость доставки, неготовность к покупке прямо сейчас, простое сравнение цен, слишком высокие цены, желание сохранить список покупок на будущее.

Материалы конференций

Web App Masters Tour 2010 Coverage — Reports, Presentations, Workbooks
Отчеты, презентации, конспекты и видео с серии мини-конференций Web App Masters Tour 2010, проходившей с марта по июль в Сан Диего, Миннеаполисе, Филадельфии и Сиэттле.

Реализм графических пользовательских интерфейсов

17 Авг

Дизайн интерфейсов за свою историю всегда шёл к реализму в своих графических решениях. Компьютеры становились быстрее, дизайнеры добавляли детали такие как цвет, псевдотрёхмерность, тени, блики и даже намёки на физику поведения. Некоторые изменения помогали юзабилити. Тень под окошком операционной системы помогает узнать активное окно. Физические качества и возможности iPhone делают его более привычным в использовании.

В других направлениях, положительные эффекты от детализации, в лучшем случае, остаются под вопросом. Графические пользовательские интерфейсы (GUI) обычно полны символов. Большинство элементов, которые вы видите на мониторе, используются, чтобы донести до вас конкретные концепты. Маленький домик на рабочем столе означает не «жилище», а «Вернуться в начало». Глаз — не глаз, а «взгляните на выбранный элемент». Маленький треугольничек — не треугольничек, а «нажми на меня и увидишь допольнительные опции для использования». Иконки предназначены не для имитации реальных объектов, а для передачи обобщённого представления — концепта.

Графические детали и реализм могут отвлекать от истинной задачи иконки. Мне поможет вырезка из книги «Понимаем комиксы» Скотта Макклауда (Scott McCloud’s «Understanding Comics»), книга, которую должен прочитать каждый дизайнер.

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

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

Настоящий фотоаппарат на кнопке вводит в заблуждение.

Читать далее

Весь интерфейс 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

Основные принципы юзабилити

22 Июл

Правило 7±2
Известно, что физические возможности мозга по обработке информации далеко не безграничны. По результатам исследования Джорджа Миллера кратковременная память человека может одновременно содержать от 5 до 9 сущностей. Этот факт очень часто используется для обоснования необходимости сокращения количества элементов в навигационных меню до 7, что является причиной горячих дебатов, поскольку не совсем ясно, как это правило должно использоваться в Интернете. [Miller’s studies]

Правило 2-х секунд
Оно состоит в том, что пользователь не должен ждать определенной реакции системы (например, запуска или переключения приложения) дольше, чем 2 секунды. Это значение — 2 секунды — выбрано абсолютно произвольно; тем не менее, оно кажется подходящим. В итоге, чем меньше пользователь находится в ожидании, тем лучше.
Правило 3-х кликов
Никакому пользователю не понравится использовать сайт, если он не может найти нужную ему информацию за 3 клика мышкой. Иными словами, это правило подчеркивает важность интуитивно понятной и простой навигации по сайту. В большинстве случаев важно не само количество необходимых кликов, а общая понятность организации системы. Да, даже 10 кликов не являются проблемой, если на каждом этапе пользователь ясно представляет, где он и куда следует двигаться дальше.

Читать далее