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.

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

7 Июн

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

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

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

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

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

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

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

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

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

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

22 Май

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

Этот материал открывает серию ежемесячных обзоров свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Уже около года регулярно собираю, публикую и расшариваю эти ссылки в тематической Friendfeed-комнате User Experience, но помимо общей ленты полезным оказался и дайджест. Это первый выпуск — апрель 2010 года.

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

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

Faceted Finding with Super-Powered Breadcrumb

Greg Nudelman предлагает интересный подход к построению навигации в интернет-магазинах и интернет-каталогах. Он показывает несколько примеров доработанных «хлебных крошек», которые позволяют гибко фильтровать список товаров и результатов поиска.

Controlling Privacy on Social Networking Services

Matthew C. Clarke описывает проблемы современных социальных сервисов с приватными данными пользователями — в первую очередь то, как сложно управлять их настройками. А также предлагает несколько решений проблемы.

UXmatters Q&A — Putting a Paper Form Online / Avoiding Dropouts and False Information / Applying Aesthetics

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

Designing with Lenses

Методика использования «линз» в проектировании и дизайне от Билла Скотта из MeeBo. Способ позволяет посмотреть на интерфейс под разными углами, сопоставив его по одной из «линз» (например, точный или схематичный показ лиц). Коллекция паттернов «линз» доступна на сайте проекта.

Designing for iPad — Reality Check

Компания Information Architects рассказывает о процессе проектирования и дизайна для iPad. Команда успела собрать неплохой опыт работы в этом направлении и дает оценку адекватности официального руководства по интерфейсу.

Eye Tracking — Best Way to Test Rich App Usability

Обзор методики тестирования с помощью eye-tracking, ее особенностей и ограничений от James Breeze. Он рассказывает о возможных способах проведения eye-tracking-тестирования и эффекте каждого из них.

Инструменты

Mobile Chart Options

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

Google Drawings Wireframe Stencil

Набор wireframe-стенсилов для онлайн-инструмента проектирования Google Drawings. Хотя он изначально и не был предназначен для работы над интерфейсами и сильно уступает специализированным инструментам, его возможности совместной работы выглядят интересно.

Putting Together Simple Wireframes Using OmniGraffle

Краткое и емкое руководство от компании CX Partners по проектированию с помощью OmniGraffle. 3-страничный PDF-документ предлагает пошаговое руководство по созданию wireframes.

Паттерны

Touch Gesture Reference Guide

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

iPad UX Interactions

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

Design Patterns for Mobile Faceted Search

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

Maps in Modern Web Design — Showcase and Examples

Обзор примеров реализации карт в вебе и набор советов по их правильному использованию. Автор статьи Zach Dunn рассказывает о способах использования карт и дает примеры для каждого из них.

Процесс

Sustainable UX (презентация Nick Finck)

Презентация Nick Finck с конференции UX Web Summit о процессе проектирования. Хотя тема раскрывалась уже сотни раз, это один из лучших материалов по теме с хорошими иллюстрациями и удачной структурой.

Planning Your UX Strategy

Renato Feijo пишет о том, как постепенно интегрировать процесс проектирования в общую работу компании. Он рассматривает 6 степеней взаимодействия — от полного безразличия и первичного интереса к теме до активного вовлечения специалистов и их полной интеграции.

Managing User Experience Teams

Блог Margaret Gould Stewart и Graham Jenkin из Google, рассказывающий об управлении интерфейсными проектами в компании. Хотя многие материалы описывают общие для проджект-менеджмента вещи, в них упоминается много интерфейсной специфики.

Using a Collaborative Parallel Design Process

Описание процесса совместного дизайна и практики его применения от Mike Myles. Он рассказывает, как группа специалистов по интерфейсам, их коллег из других отделов и пользователей могут совместно прорабатывать интерфейс.

Кейсы

The FedEx Journey

Tom Wicinski и Brice Stokes из FedEx рассказывают о том, как построен процесс работы над интерфейсами в компании. А также том, как он выходит за рамки компьютеров в более общую сторону customer experience.

The Evolution of a GUI and the Pulsating Life of a UX

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

Case Study of Agile and UCD Working Together

История редизайна крупного информационного сайта Computer Weekly. Хотя agile тут упомянут скорее как модное слово (описания взаимодействия команд почти нет), в статье приведен полезный график проекта.

Теория

Navimation — Exploring Time, Space & Motion in the Design of Screen Based Interfaces

Jon Olav H. Eikenes и Andrew Morrison предлагают новый термин «навимация» для современных интерфейсов. Они активно используют анимацию для того чтобы показать переходы между экранами, объектами и состояниями системы.

Eight Principles of Information Architecture (презентация Dan Brown)

Хорошая обзорная презентация Dan Brown о ключевых принципах информационной архитектуры — внимание к контенту, большой выбор усложняет выбор, постепенное раскрытие информации, множественные точки входа и способы классификации и т.д.

История

Into the Groove — Lessons from the Desktop Music Revolution

Dave Cronin из Cooper Consulting описывает историю развития интерфейсов специализированных программ для музыкантов — от аналоговых и простейших цифровых устройств до сложных компьютерных программ и необычных инструментов.

Bob and Beyond — A Microsoft Insider Remembers

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

History of the Button (презентация Bill De Rouchey)

Презентация Bill De Rouchey, которая рассказывает об истории кнопок. В ней приведено множество примеров, показывающих развитие от механических инструментов до компьютерных интерфейсов.

Тренды

Natural User Interfaces are Not Natural

Дон Норман размышляет о тренде «естественных» интерфейсов и приводит несколько причин о том, почему они не совсем естественные.

Игровые механизмы и элементы в интерфейсах

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

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

Обзор средств прототипирования веб-сайтов

21 Май

25 июня 2009 года в Москве на конференции «Сайт-2009. Создание и поддержка интернет-проектов» Коноплицкий Павел выступил  докладом «Обзор средств прототипирования веб-сайтов».

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