Usability.by

В Блоге вебмастеров опубликовали перевод статьи “A Design Is Only As Deep As It Is Usable”:

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

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

Прочитать полностью

На Хабрахабре опубликовали перевод статьи Сьюзан Вайнченк “Even The Illusion Of Progress Is Motivating”

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

Карта А: на карточке 10 квадратов для штампов, и когда вы её получаете, все они пустые
Карта Б: на карточке 12 квадратов для штампов, и когда вы получаете карточку, то два уже проштампованы.
Вопрос. Сколько времени у вас займёт, чтобы заполнить карточку? Произойдёт это быстрее по сценарию А или Б? В конце концов, вам надо купить 10 чашек кофе в обоих случаях, чтобы получить одну бесплатно. Так если разница, какую карточку вы используете?

По-видимому ответ — да, есть. Вы быстрее заполните карточку Б, чем А. Это называется эффект приближения к цели («goal-gradient» effect).

Прочитать всю статью

На Хабрахабре опубликовали перевод статьи Human Photos Double your Conversion Rate:

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

Это было подтверждено двумя независимыми экспериментами

Я проанализировал результаты двух A/B тестирований пользователей сайта Visual Website Optimizer и пришёл к выводу, что верный способ привлечь внимание посетителей — это разместить людские фотографии на сайте.

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

Давайте рассмотрим оба эксперимента.

На Хабрахабре опубликован перевод статьи “Design Better And Faster With Rapid Prototyping”:

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

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

Читать весь текст перевода

На Хабрахабре опубликован перевод статьи “The Small Print: Writing UI Instructions”

Поведение человека в сети в основном управляется целью. У людей есть цель, будь то совершить покупку, найти рецепт, или же узнать, как сделать что-либо иное. Например, если вы рисуете кнопку, на которую нужно нажать (добавить позицию в корзину, просматривая интернет-магазин), сделайте кнопке тень. Получится эффект «приподнятости» кнопки, и это поможет посетителю сайта понять, что это именно кнопка, она кликабельна и это именно то, что ему нужно.

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

Прочитать перевод на Хабрахабре

На Хабрахабре опубликован перевод описания паттерна «Активные ссылки» из библиотеки паттернов Quince:

«Ссылки — это просто или совсем не просто?

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

Мы говорим о хорошем интерфейсе. И говорим о нем на профессиональном
языке, глядя в сторону опыта западных специалистов. Стало быть, одной примитивной классификации: ссылка или не ссылка (а например кнопка), нам очень скоро станет недоставать. В статье идет описание одного из вида — ссылок, называемого Активными ссылками.

— При нажатии на ссылку произойдет создание резервной копии? – это Активная ссылка
— Поля форм, заполнятся автоматически-определяемыми значениями? – это Активная сылка
— А может еще что-то…

У вас есть несколько команд, которые нужно отобразить совместно, или визуально выделить одну из них.»

Прочитать перевод на Хабрахабре

На Хабрахабре опубликован перевод заметки Азы Раскина “How To Critique An Interface“:

“Людей далёких от дизайна часто просят высказать своё мнение об интерфейсе. Быть может вы директор компании, а исполнитель просит оценить ваш новый сайт. Или вы руководитель проекта и недоумённо смотрите на макеты вашего дизайнера. Как вы оцениваете дизайн? На что обращаете внимание? И как вам ответить что-то более внятное, чем «Вот выглядит клёво!» или «Убери это с глаз долой!».

Сложно ответить на эти вопросы в такой короткой статье, но я приведу хотя бы несколько советов”

Прочитать весь перевод

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

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

Согласно процессу проектирования, которому мы следуем в моей компании, Mad*Pow Media Solutions, принято после определения концептуального направления и контентной стратегии данного проекта и после уточнения подхода к проектированию через проведение исследования пользователей и итераций юзабилити тестирования, приступить к визуальному дизайну. Обычно мы берем ключевые экраны со структурой которых и функциональностью уже определились - например, макет главной страницы или страницы панели инструментов - и рассматриваем три альтернативных визуальных дизайна. Эти три альтернативных визуальных дизайна, или макета, включают то же самое содержание, но воспроизведенное в разных цветовых палитрах и с разным набором картинок.

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

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

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

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

Існуюць розныя школы па дызайну дастасаванняў пад iPhone. Хтосці аддае перавагу дызайну на паперы (я аддаю), хтосці будзе паслугавацца кампутарам, каб стварыць свой чарговы GUI, ад каторага будзе займаць дух.

Вось спіс некаторых прыладаў і шаблонаў для дызайну вашага наступнага аппліку.

Шаблоны:

• Keynote ‘09: ад MockApp
• Microsoft PowerPoint (ШЗН?): ад MockApp
• OmniGraffle: ад Patrick Crowley
• OmniGraffle: ад Yahoo
• Illustrator: ад Mercury Intermedia
• PhotoShop: ад Teehan+Lax

Адмысловыя прылады:

• Balsamiq Mockups

Для заўзятараў асадкі і паперы:

• “Афіцэрская лінейка”: iPhone Stencil Kit
• DesignCommission таксама дае PDF шаблон
• Sketch Paper у pdf: на labs.boulevard
• Друкаваны сшытак: Kaplan Software Group

У кніжцы Pragmatic Thinking and Learning: Refactor Your Wetware аўтар Andy Hunt раіць ужываць асадку і паперу, каб выкарыстоўваць правае паўшар\’е галаўнога мозгу і вызваліць свой творчы патэнцыял. Тым часам пры ўжыванні кампутару, вы будзеце сканцэнтраваныя на дэталях, а не на дасканалым user experience.

Яшчэ адна хіба пры ужыванні кампутару - гэта калі вы пакажаце свой дызайн кліенту, ён таксама сканцэнтруецца на дэталях:

- Калі ласка, ці можна змяніць цень гэтае чырвонае кнопкі, ён надта чырвоны?

Паказваючы дызайн намаляваны ўручную, вы дазволіце кліенту толькі ўявіць, як фінальны продукт можа выглядаць. Так што такая тут справа, што ўлева, што ўправа: вам лепей напэўна ведаць, на што чакае кліент, і ужываць адпаведную тэхніку.

via dev.by (Орыгінал)

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

Прочитать всю статью Джеффа Джонсона на сайте Software People

В украинском блоге Юзабилист опубликован перевод статьи Лимана Кейси “What Makes a Good Usability Professional?”

Те из нас кто причастен к созданию полезных, удобных продуктов приходят с разным образованием, работают в различных условиях и имеют широкий спектр технических навыков.

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

Читать полностью

“Искрографики (Sparklines)” — близкий к тексту пересказ небольшой части главы «Sparklines: Intense, Simple, Word-Sized Graphics» из книги Эварда Тафти BEAUTIFUL EVIDENCE.

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

На сайте Юзабилити-Марафона появилась видеозапись одного из семинаров Роберта Шумахера «Выгодность вложений в юзабилити: возврат инвестиций (ROI)». Данный семинар учит практиков, каким образом можно оценить вклад юзабилити тестирования на организацию, как в плане роста доходов, так и в плане сокращения расходов. Используемые примеры основаны на реальных веб-сайтах, мобильных приложениях и центрах поддержки пользователей (колл-центры). Цель семинара — научить участников оценивать текущее и будущее поведение, и как оно влияет на организацию. Участники могут использовать полученную информацию для удешевления юзабилити процессов внутри организации.

Программа семинара:

• Идентификация проблем на примере центра поддержки пользователей;
• Оценка влияния: как это влияет на бизнес?
• Оценка влияния изменений;
• Подсчет возврата инвестиций в цифрах.

Алан Купер в книге “Психбольница в руках пациентов” писал о личных и корпоративных целях следующее:

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

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

Личные цели:

• Не чувствовать себя глупо;
• Не совершать ошибок;
• Выполнить адекватный объем работы;
• Развлечься (или хотя бы не страдать от скуки);

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

Корпоративные цели:

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

Психологи, изучающие рабочую обстановку, применяют термин «гигиенические факторы», которые Сол Геллерман (Saul W. Gellerman) определяет как «элементы, обязательные для эффективной мотивации, но не способные мотивировать самостоятельно». Освещение в вашем офисе – гигиенический фактор. Вы ведь не ходите на работу только потому, что там хорошее освещение, но если бы освещения не было, вы не ходили бы туда вовсе. Все корпоративные и практически цели, приведенные в списке, являются гигиеническими. С точки зрения корпорации, это все важные цели, однако работу выполняет не корпорация, а люди, а для людей важнее цели личные.”

В книге “Об интерфейсе” Алан более подробно раскрывает вопросы выявления и проектирования для целей пользователя.

В стать “User Goals and Corporate Goals” приводится пример конфликта личных целей пользователя и корпоративных целей на примере организации взаимодействия с вендинговым аппаратом:
Читать полностью »

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

Эти сложности возникают по трем причинам:

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

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

Читатйте перевод статьи Скотта Беркуна на сайте Softwarepeople.

В Американском институте изобразительных искусств (AIGA) придумали схему, чтобы дизайнеры могли объяснить что они делают в организации. Схема показывает процесс дизайна продукта или решения.

Подробное описание каждого блока можно прочесть в статье Дмитрия Литвиненко или скачать оригинальный документ от AIGA (pdf, 65 Kb)

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

Читайте перевод статьи “How to Spot Quality within Web Design: Examples & Tips”: Часть 1, Часть 2, Часть 3.

Артём Янцевич

Перевод статьи, опубликованной в Smashing Magazine, “10 Principles Of Effective Web Design”

Юзабилити, а не визуальный дизайн, на сегодняшнее время определяют успешность интернет проектов. Так как именно пользователи являются «конечной инстанцией», то появился новый подход – дизайн интерфейса ориентированный на пользователя (User-centered design). Он так же затронул область веб-дизайна. Зачастую именно его использование определяет успешность будущего веб-ресурса.

Здесь мы не будем приводить конкретные «рецепты» решения тех или иных задач (например, где на станице расположить поиск), как это уже сделано в других статьях; вместо этого, остановимся на основных принципах, подходах эффективного веб-дизайна. Для начала следует понять, что применение этих подходов на практике, требует от разработчика решение более сложных задач, но оно намного упрощает процесс восприятия продукта пользователем. Как результат: удовлетворённость посетителя вашим ресурсом.

Читать полностью »

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

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

Читайте первую и вторую часть перевода статьи “Design To Sell: 8 Useful Tips To Help Your Website Convert”