Tag Archives: дизайн

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

19 Окт

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

 

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

Dancing with the Cards — Quick-and-Dirty Analysis of Card-Sorting Data
Shanshan Ma рассказывает об интересной технике при использовании карточной сортировки — с помощью удобной и наглядной матрицы она позволяет сортировать и группировать близкие друг к другу варианты. Помимо того что это полезный в работе инструмент, итоговый результат еще и отлично походит для презентации клиентам.

The Power of PET Design in Action
Простое, но очень эффектный демонстрационный ролик, в котором Spencer Gerrol пошагово показывает способы улучшения представления информации на сайте туристической компании. Эти шаги позволяют превратить простой информационный блок в продающий и завлекающий клиентов.

Three Reasons Why Persuasive Design Isn’t Enough to Influence Change
Статья Collen Jones об ограничениях “убеждающего дизайна” — практики, которая в последние несколько лет стала особенно актуальной. Она приводит три причины, по которым этот подход еще не до конца зрел и требует более глубокой проработки.

Recruiting Participants for Unmoderated, Remote User Research
Jim Ross из компании Electronic Ink Philadelphia дает серию советов о том, как подбирать респондентов для удаленного немодерируемого юзабилити-тестирования. Он рассказывает о самом процессе, его основных методиках и инструментах, которые помогут найти испытуемых.

What’s the real value behind UNMODERATED remote user testing?
Специалисты компании Userzoom, предлагающей онлайн-инструмент для немодерируемого юзабилити-тестирования, развенчивают мифы об этой методике. Они приводят примеры из практики, ссылаются на опыт работы собственного продукта и отвечают на десяток вопросов по теме.

Recommendations for Usability in Practice
Jasper van Kuijk собрал коллекцию практических рекомендаций по улучшению юзабилити, которые легли в основу его докторской диссертации. Хотя многое из этого слышано уже не раз и достаточно очевидно, сама по себе подборка достаточно полезна. Читать далее

Usability-тесты. Сомнительная инвестиция или деньги из воздуха?

18 Окт

Первая реакция на чье-то желание проверить результат твоего труда универсальна: отправить автора вопросов заняться «своими делами», а уж “эти-то вопросы” предоставить решать профессионалам. Реакция прогнозируемая, и большинство читателей, уверен, при легком самоанализе отчетливо вспомнят себя в подобной роли.

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

Концепции настолько самоценной, что проверять ее гениальность никакого резона нет, а надо всего лишь взять, да и поверить автору, что все будет тип-топ.

Другой вопрос, что автору вряд ли придется отвечать за успешность дизайна на рынке. Будет это продаваться или нет, удобно этим пользоваться или нет, и, в конце концов, – вернется клиент к вам купить что-нибудь еще или забудет о вас при первом удобном случае. За это традиционно принято отвечать продавцам и маркетологам, которые при всей своей искусности могут становиться заложниками некачественных, неудобных продуктов. Любые инвестиции в рекламу и позиционирование никогда достойно «не отобьются», поскольку не склонны люди покупать неудобную обувь, пользоваться неудобными гаджетами и ходить по странным, непонятным интернет-сайтам. Какими бы красивыми ни были упомянутые объекты.

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

С чего начать? В первую очередь, с честного ответа самим себе, а в чем же именно вы не уверены. Нужен ли рынку мой продукт или сервис? Кому именно его предлагать? Нужен ли он им и для чего? Нравится ли? В состоянии ли потенциальные клиенты им пользоваться, и насколько легко это удается? Именно природа вашей неуверенности определяет то, с чего начать. Маркетинговые классические тесты помогут вам со всеми вопросами, кроме последнего, и если вы хотите максимально угодить вашим потенциальным потребителям – начинайте именно с них. Это уточнит ваш выбор, продиагностирует спрос и ответит на вопрос, стоит ли именно ЭТО предлагать конкретно ЭТОЙ целевой аудитории. Не исключаю, что в ряде случаев до последнего вопроса об удобстве использования речь может даже не дойти.

Другое дело, если ваши вопросы находятся в области удобства использования, и здесь вы автоматически попадает в клиентуру специалистов по usability-тестам.

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

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

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

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

В рамках таких исследований людей не спрашивают об их мнении о продукте, не просят комментировать какие-либо эстетические аспекты и не устраиваются дискуссии о том, как пользователь относится к вашему бренду и вашей компании. Все это уходит на второй план. Остается только Человек, Услуга и объединяющий их в этот момент контекст использования. На usability-тестах воспроизводятся реальные жизненные ситуации, люди сами нажимают кнопки, гуляют по сайтам, настраивают себе услуги, читают бумажные инструкции и самостоятельно пытаются разрешать возникающие по дороге ситуации. Все как в реальной жизни. За исключением того, что в процессе тестов происходит полный замер деятельности пользователя, выполняемых им шагов, операций и допускаемых ошибок. В итоге вы получаете полную детальную метрическую картину того, где же людям «сложно», что именно их путает, что мешает легко и просто пользоваться вашим сервисом или сайтом. В качестве еще одного анонса могу сообщить, что тема оценки финансовой эффективности от вложений в usability станет одной из тем ближайших номеров журнала.
Работа с usability (англ. удобство использования) является свидетельством зрелости компаний, которые способны отложить в сторону свой личный опыт, свое личное мнение, привычку примерять на себя даже те свои услуги, которые предназначены для абсолютно иной пользовательской аудитории, и предложить свои продукты на пробу реальным людям.

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

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

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

Что дальше? – А дальше продолжение, следующие номера и серьезное погружение в тему того, как на практическом уровне выстроить ваш Дизайн с учетом usability-аспектов.

Автор: Александр Павлович, руководитель службы дизайна продуктов ОАО Вымпелком (ТМ Билайн)

Почему папки желтые

6 Сен


Почему папки желтые
Папка — одна из самых известных метафор экранных интерфейсов.  Это очень мощный и сильный символ. За достаточно короткий период времени он сумел затмить термин, который был призван обозначать.  Понятие «директория» или «каталог» канули в Лету. Хотя «папка» когда была лишь метафорой для их обозначения в графических оболочках.

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

Directory (от лат. directorium — маршрут движения) в общем смысле обозначает некую структуру, содержащую набор определенной информации. Это может быть список людей или каталог адресов.


Своим появлением она обязана идее оснастить графический интерфейс легендарной рабочей станции Xerox Star (Xerox 8010) метафорами, понятными рядовому офисному клерку. Идеи черпались из стандартного канцелярского оснащения тогдашних офисов. Первым же коммерческим воплощением на массовом рынке стал интерфейс Apple Lisa.

Basic folder appearanceA folder is drawn as a white rectangle (filled in by the application) with a thin (one pixel) black border. Every folder has a tab, which looks like a tab on a standard manilla folder. The tab is always above the upper left corner of the folder. It is called the title tab. The rectangular portion of the folder that holds the folder’s contents is called the body of the folder

“Lisa user interface standards” (1980)

Бумажная папка
Прототипом для метафоры послужила так называемая «манильская папка» (manila folder). Насколько я знаю в русском языке подобный термин отсутсвует (хотя иногда и мелькает в  художественной литературе, что, впрочем, может являться лишь ляпом). Правильно будет говорить просто «бумажная папка» или «папка».
Конструктивно она представляет собой согнутый лист бумаги, внутрь которого можно вкладывать или подшивать документы..


Folder=fold (сгибать, собирать)+er (суффикс для образования существительного)

Данный тип папок не был известен на территории бывшего СССР, поэтому иконка папки отчасти являлась симулякром, т.е. не имела под собой предметной части, а только свойство. В системах Win 9x объект казался просто желтым прямогольничком с выступом, т.е. вещью абстрактной.

Бумага. Почему папки желтые.

Американский тип папок изготовляют из прочной бумаги, называемой «манильской». В ее состав входит «манильская пенька», волокна, добываемые из листьев текстильного банана или абаки (растение, родом с Филиппин). Волокна очень жесткие и обладают равномерной толщиной, легко окрашиваются. Хотя, как правило, манильскую бумагу не подвергают обработке красителями. Она сохраняет естественный цвет волокон: желтовато-бежевый. Вот почему иконки папок Windows и некоторых других систем — желтые или бежевые.

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

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

Материал для изготовления папок достаточно гладкий, в составе бумаги нет грубых частиц, чтобы не поцарапать документы. Отсуствуют и химические активные компоненты, способные, вступить в реакцию с фотобумагой и повредить снимки, хранящиеся в папках. Существует стандарт, который требует, чтобы папки, попав в воду, не окрашивали содержимое в какой-либо посторонний оттенок.
«Леопардовая» иконка папки из MacOs, хорошо видна неоднородная бумажная фактура.

В Microsoft Windows Vista/7 папки развернуты на 90 градусов. Это сделано для придания определенной свежести иконкам. А также символизирует более широкую трактовку понятия «папка» в этой системе. В частности, она больше не ассоциируется лишь с физической директорией на диске. У развернутой папки есть свое преимущество: в ней легче компоновать изображение документов.

Продолжение следует…

Спасибо большое пользователю rogix

Обзор свежих материалов, июль 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 кликов не являются проблемой, если на каждом этапе пользователь ясно представляет, где он и куда следует двигаться дальше.

Читать далее