Матчасть

Типографский калькулятор

Это веб-приложение привнесит в веб те возможности, которыми уже 500 лет пользуются в полиграфии и печатном деле.
— Джефри Зельдман (JEFFREY ZELDMAN), блог A List Apart

Ampersand NYC 2013 web type design conference

2 ноября на конференции Ampersand NY, посвященной типографике в вебе, Ник Шерман (NICK SHERMAN) представил свой калькулятор (SIZE CALCULATOR) для расчета реального размера шрифта в зависимости от дистанции чтения и визуально воспринимаемых габаритов текста.

Калькулятор позволяет просто и легко получить расчетные значения для одного из параметров, изменяя два других.

Например,

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

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

Пусть экран смартфона находится на расстоянии 20 см от лица читателя. Фиксируем замочком третий параметр (воспринимаемый размер) и указываем в качестве дистанции новое значение.

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

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

Стандартный
Видео, Матчасть

Человеко-ориентированное проектирование: Теория и практика

Выступление Дмитрия Сатина для стартапов в API.Moscow.

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

Стандартный
Видео, Матчасть

Человеко-ориентированное проектирование сайтов

1 октября 2013 года состоялась кейс-конференция «Как мы делаем такие сайты», организованная аналитическим порталом рынка веб-разаработок CMSMagazine.

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

human centered design

Согласно этому подходу, проектировать следует в таком порядке:

  1. Стратегия дизайна
  2. Портрет потребителя (персонаж)
  3. Сценарий взаимодействия
  4. Прототип (макет)
  5. Проверка (тестирование) прототипа

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

  1. Цели
    Для чего это все делается?
  2. Целевая аудитория
    Для кого это делается?
  3. Маркетинг (откуда они узнают?)
    Какие каналы и способы привлечения внимания будут использоваться?
  4. KPI (показатели успеха)
    Количественные и качественные, отслеживаемые результаты работы сайта

Портрет потребителя формируется из:

  1. Профиль
    Возраст, пол, место проживания и т.д.
  2. Потребности (мотивы)
    Какие у него проблемы?
    К чему стремимся?
    Жизненная ситуация
  3. Цели (образ результата)
    Что ему нужно, чтобы решить проблему?
  4. Поведение
    Как он решает проблему без нас?
    Как выглядит его день (жизнь)?

Для разработке сценария взаимодействия необходимо

  1. Выписать шаги решения задачи при помощи сайта
    Что спрашивает потребитель?
    Что отвечает сервис (поставщик)?
  2. Думать о людях, а не сайтах!

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

Какие проблемы ждут потребителя?
Что может не хватать потребителю для получения услуги?

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

Любой жаждущий более подробных нюансов процесса человеко-ориентированного проектирования может углубится в ГОСТ Р ИСО 9241-210—2012 «ЭРГОНОМИКА ВЗАИМОДЕЙСТВИЯ ЧЕЛОВЕК—СИСТЕМА. Часть 210: Человеко-ориентированное проектирование интерактивных систем» (ISO 9241-210:2010 Ergonomics of human-system interaction — Part 210: Human-centred design for interactive systems (IDT)).

***

Для всего мира отличным примером присутствия правительства в интернете являются госсайты Великобритании.

Благодаря специально созданной структуре Government Digital Service, в этой стране формируется и культивируется правильное взаимодействия человека и государства в цифровой среде. Чего только стоят разработанные этой командой принципы дизайна!

Похоже, что и наша страна наконец-то собралась двигаться в таком же направлении. В докладе Дмитрия Сатина прозвучал анонс сайта design.gov.ru, на котором планируется разместить стандарты и руководства по созданию дизайна сайтов органов власти. Они должны сыграть существенную роль как для заказчиков, так и для исполнителей госзаказов.

UPDATE: Сайт Минкомсвязи о планах по повышению качества жизни на 2012-2018 годы.

***

P.S. Бонус для самых терпеливых, для тех, кто смог осилить пост до конца. Собственно, само видео выступления Дмитрия Сатина, а также еще 11 докладов из секции Как мы делаем государственные сайты 🙂

Стандартный
Матчасть

Дизайн и юзабилити интернет-магазина

Предлагаю вашему вниманию скромную презентацию, по которой я с горем пополам выступил год назад на конференции про интернет-магазины.

И хоть она и называется «Дизайн и юзабилити интернет-магазина», но про конкретно интернет-магазины там ничего нет. В ней вообще про дизайн, юзабилити и вот это всё.

Стандартный
Матчасть

S.M.A.R.T-подход при постановке целей проектирования

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

Если вам такая ситуация знакома, то у меня для вас хорошая новость: это лечится. Причина болезни заключается в отсутствии правильной постановки целей проектирования.

Как решить проблему выявления и постановки действительно работающих целей, а также о том, как повысить качество уже имеющихся, вы узнаете, если посмотрите познавательный вебинар сообщества UX Russia:

Стандартный
Матчасть

Управление информационным резонансом

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

Данной (резонансной) публикацией слайдов хотелось бы еще раз на практике доказать верность тезисов, изложенных на представленных слайдах.

Стандартный
Матчасть

Правило про комок седых волос

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

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

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

Метод очень прост. Хорошие посты на хабре, как правило, имеют минимум комментариев.

Сравните, для примера, хороший пост о проектировании интерфейсов с плохим постом о проектировании интерфейсов.

Стандартный
Матчасть

Машинный перевод

После недавнего обновления программа SoundHoud, предназначенная для распознавания музыки, стала предлагать мне буквально сломать мой смартфон:

Я, конечно, не ударил, но задумался.

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

Да, машинный перевод очень часто плох, но он дешевле и быстрее.

Однако, может стоит посмотреть на эту дешевизну под другим углом? Во сколько обойдется плохой перевод, если учесть, что он сможет привести к катастрофическим последствиям для вашего клиента?

Мораль

Наличие плохого перевода хуже, чем его отсутствие.

Стандартный
Матчасть

Шпаргалка по целеориентированному проектированию

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

Вот она: http://www.mindmeister.com/ru/114830993/_

Стандартный
Матчасть

Гайдлайны (HI & UI & UX & Design Guidelines)

Посмотри, теперь в столбике ссылок справа (сразу после секции «Метки») появилась новая группа ссылок «Гайдлайны».

По скромному мнению автора этого блога там собраны ссылки на самые востребованные руководства к проектированию и созданию интерфейсов.

Чтобы всегда были под рукой.

Guidelines

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

Стандартный
Видео, Матчасть

Metro Design Language

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

Metro — это кодовое название языка проектирования интерфейсов, разработанного в корпорации Microsoft и ориентированного на представление информации преимущественно средствами типографики. В первую очередь он был предназначен для использования в Windows Phone 7.

Metro UI

Используемые в Metro принципы проектирования (например, упор на типографику) зародились еще в цифровой мультимедийной энциклопедии Microsoft Encarta 95, а позже были развиты в продуктах Windows Media Center и Zune.

Сегодня принципы Metro реализованы в мобильной операционной системе Windows Phone, а также в грядущем обновлении главного экрана Xbox 360 и ОС Windows 8.

Специальная версия шрифта Segoe, которая называется Segoe WP, используется как базовый шрифт для всех типографских элементов.

На выставке Computex корпорация Microsoft подтвердила, что следующая версия операционной системы Windows (Windows 8) черпает вдохновение из Metro. Microsoft также планирует добавить принципы проектирования Metro и в другие свои продукты, такие как Xbox 360 и Windows Live, с целью создания однообразного и выделяющегося внешнего вида для своих продуктов и сервисов.

— Wikipedia

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

На десерт небольшое видео:

Внимание: специальный канал на Youtube! Рекомендуется к обязательному просмотру.

Если у вас есть интересные ссылки на интересную информацию о Metro и/или все, что с ним связано, киньте их, пожалуйста, в комментарии к этому посту. Спасибо.

Стандартный
Матчасть

Шаблон для персонажа 2.0

Разработка персонажей является довольно сложным делом, если у тебя нет опыта. Однако, это типовая задача, и, соответственно, для облегчения ее решения могут применяться шаблоны (persona templates).

Если поискать шаблоны описания персонажей в интернете, можно найти массу любопытных примеров. Как в картинках,

~~~

~~~

~~~

~~~

~~~

~~~

~~~

~~~

~~~

~~~

~~~

так и в виде документов: Orange Bus Workshop Persona Template_v2.0 или Persona_Template.doc.

Во всем этом разнообразии можно заметить явный визуальный и смысловой тренд, который натолкнул меня на следующую мысль:

А почему бы не использовать в качестве шаблона для персонажа профиль из социальной сети ВКонтакте или Facebook?

Если присмотреться, то многие картинки, представленные выше, очень сильно напоминают стены из соцсетей:

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

Какие плюсы?

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

Минусы:

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

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

Что скажешь, мой клевый читатель?

Стандартный
Матчасть

Как вывести пользователей на чистую воду?

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

Исследуя людей и их поведение, иногда довольно трудно понять, что правильно, а что — нет. Многие врут вам как исследователю. Другие врут сначала сами себе, а потом уже и вам.

Очень важно на этом этапе:

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

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

Метод

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

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

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

Проектировщик Коломбо

Отсюда следует, что пользователь, в свою очередь, очень похож на подозреваемого — у него тоже есть цели, мотивы и задачи.

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

Для этого в процессе исследования нужно следовать принципам хороших сыщиков:

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

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

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

Цели

Цели — это то, зачем люди пользуются вашей программой или сайтом. Цель преступника — это то, зачем он совершает преступление.

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

Важным аспектом является разница между «человек хочет» и «человеку надо». В каждом конкретном случае определение нужды или желания может сказать о целях довольно много полезного.

И преступника, и пользователя к достижению целей толкают мотивы. Что же такое мотивы?

Мотивы

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

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

Отсюда следует, что мотивы — это просто вышестоящие цели. То есть, это тоже цели, но более высокого уровня и приоритета. Они отвечают на вопрос «почему?».

Преступник достал пистолет и направил его на жертву. Его цель в данном случае — убить человека, а мотив — получить наследство. Достижение одной цели необходимо для достижения второй.

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

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

Зная, как отличить цели от мотивов, перейдем к задачам.

Задачи

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

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

Варианты могут быть самыми разными:

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

Любая из предложенных задач может привести к выполнению цели. В этом логика работы приложений и веб-сайтов.

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

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

Резюмируя

Настоящий проектировщик (точно так же, как и настоящий сыщик) не должен останавливаться до тех пор, пока не выяснит все истинные цели, мотивы и задачи пользователей. Он не успокоится, пока не соберет всю необходимую «доказательную базу» и не закроет все белые дыры в пазле «картины преступления».

Стандартный
Матчасть

Процесс целеориентированного проектирования в деталях

Кликните по картинке, чтобы ее увеличить:

Процесс целеориентированного проектирования в деталях

Подробная схема целеориентированного проектирования, взятая из книги Алана Купера «Об интерфейсе». Все четко, понятно и обосновано.

Эту «карту проекта» можно использовать как прямое руководство к действию и для организации рабочего процесса.

Стандартный