Матчасть

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

Это веб-приложение привнесит в веб те возможности, которыми уже 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:

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

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

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

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

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

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

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

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

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

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

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

Стандартный