Компания
51,64
рейтинг
12 мая 2012 в 09:17

Дизайн → User experience design: как построить сайт для клиентов, а не для себя

В конце апреля я делал доклад на РИФ 2012 про этапы проектирования пользовательского интерфейса. Так как видео нет, попробую представить доклад в виде слайдов с моими комментариями.

UX

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


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

Пару слов про меня и почему такая тема. Меня зовут Денис Кортунов.
— Я приехал из Самары, где живу и работаю.
— Очень люблю экранчики во всем. Если мне нужно купить, например, бритву, то я выберу ту, что с экранчиком. Вроде бы, на бритье это не влияет, но это совершенно иной, более высокий, уровень взаимодействия с пользователем.
— Моя работа связана с дизайном интерфейсов. Раньше, в компании Турбомилк, я больше занимался визуальным дизайном. Среди наших клиентов было немало стартапов, для которых мы рисовали интерфейсы, иконки, кнопки и персонажей. Как выглядел процесс? Клиенты или, если повезет, юзабилити-компании, передеавали нам готовые прототипы, а мы по ним рисовали красивые интерфейсы.
— Сейчас, когда мы объединились с компанией Parcsis, я стал сам проектировать интерфейсы и взаимодействие с пользователем. Оказалось, что это очень сложно. Но с другой стороны, очень интересно. Появилась еще одна степень свободы сделать так, чтобы проект получился по-настоящему удачным.
UX

Итак, представим, что у вас появилась какая-то идея стартапа… Например, сделать вот такую замечательную желтую машину, которую все захотят купить. Не скажу вам ничего нового, но идея без реализации ничего не стоит. А реализация это всегда непросто…
UX

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

Так же и в it-проектах. Где традиционно сначала программируют (делают так называемый “движок”), а уже потом на него “натягивается” интерфейс. Получается продукт в стиле “так было удобно программистам”. Но как же пользователь?..
UX

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

Все начинается с цели. Сначала вы решаете что хотите сделать, а потом как это можно реализовать.
UX

— Во-первых, не будьте упрямыми, не закрывайте цель. В процессе работы над проектом, вы узнаете много новых нюансов и подробностей. Менять цель и стратегию — это нормально.
— Далее, на начальном уровне не увлекайтесь деталями. Да, возможно, это сладко — подумать над чем-то в мелких подробностях, но не сейчас.
— Также, не думайте про ограничения. Решайте проблемы по мере их поступления.
— Думайте о клиенте. Зачем он к вам пришел? Что вы ему можете предложить…
UX

Начните с пользовательских сценариев. Почувствуйте себя драматургами и продумайте как будут равзиваться события внутри вашего проекта.
— Первое — мозговой штурм. Например, “как улучшить опыт заказа такси”. Генерируйте идеи без каких-то ограничений. Вы можете поиграть в эту игру с коллегами или друзьями. Выдвигайте самые безумные идеи.
— Потом выделите самые жизнеспособные идеи и проведите исследование. Поймите — будет ли это работать для вашего проекта. Рисуйте эскизы, делайте раскадровки, как делают аниматоры.
— В итоге вам нужно выбрать и зафиксировать какие-то решения, на которые вы будете опираться. На этом этапе вы решите, что будете внедрять, а что нет. Не жадничайте, начните с чего-то простого.
UX

Не бойтесь принимать решения, у вас будет возможность передумать и переделать. В этом и прелесть подхода: “сначала дизайн, потом программинг” — цена ошибки не очень большая. Вы всегда можете вернуться и что-то сделать иначе.
UX

Вам нужно обязательно понять кто ваша целевая аудитория. Вот два замечательных гаджета: винтажная камера поляроид и современный айфон. Что объединяет эти два гаджета? Есть группа пользователей, которым эти штуки очень нравятся. Это хипстеры! Что можно сделать с хипстерами? Их нужно осчастливить!..
UX

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

Итак, вы продумали пользовательские сценарии. Давайте рассмотрим совсем простой: допустим, вам нужно перейти из точки А в точку Б…
UX

Но в реальном интерфейсе почему-то все получается сложно и запутано. Как этого избежать?
UX

Вам нужно продумать информационную архитекутуру вашего проекта…
UX

— В проекте есть много неупорядоченной информации: такие как имена, цены, даты, изображения, точки на карте. Можно вспомнить старые добрые блок-схемы и просто нарисовать потоки данных, не увлекаясь деталями.
— В процессе вспоминайте сценарии и связывайте их с вашими данными.
— Вы можете начать делать грубые прототипы. Просто рисуйте на бумаге как вы видите ваш интерфейс экран за экраном.
— Шаг за шагом прототипы будут все более подробные.
UX

Итак, главная задача на этом этапе — связать информацию и задачи:
— Начинаем с грубых прототипов. Вы можете их просто нарисовать на бумаге. Это очень эффективно.
— Потом мы продумываем задачи и способы их решения
— На выходе получаем некую структуру информации, которую мы фиксируем.
UX

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

Пусть это будет потоком задачи “совершить покупку в интернет магазине”. До успеха, вам нужно пройти 5 экранов, что-то выбрать и нажать.

Хорошей идеей будет подумать как можно упростить…
UX

Если конкретная задача в вашем проекте будет решаться не за 5 шагов или усилий, а за 2. Пользователь будет вам благодарен. Наверняка, он уже делал что-то подобное ранее, оценит ваши старания и будет пользоваться вашим сервисом. По-моему, самая лучшая реклама.
UX

Вот, например, сервис AnyWayAnyDay, просит вас указать только направление и дату вылета. Он сразу показывает цены в порядке возрастания. Вам не нужно вводить время вылета, выбирать компанию, фильтровать результаты или выбирать аэропорт. Вы все это можете уточнить, но потом… А сейчас вы уже видите цены и предложения от разных компаний.
UX

Вот еще один пример упрощения потока задачи от Amazon. Вы можете покупать вещи в один клик, без использования корзины. Таким же образом вы покупаете приложения в Apple AppStore, который, кстати, купил лицензию на такой способ у Amazon.
UX

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

Даже, если ваш интерфейс будет абсолютно статичным – это все равно интерактивный дизайн:
— Взаимодействие не является ни информацией, ни задачей — это некий фильтр к ним.
— Продумав как пользователь будет двигаться внутри вашего интерфейса, вы получите навигацию. Не традиционное “иерархическое меню по разделам” с большой вложенностью, а действительно удобную навигацию, которая нужна пользователю.
— Распространенная ошибка многих дизайнеров — они не думают как интерфейс будет реагировать на действия пользователя. Они делают только картинку. Добавьте движения! Будет намного интереснее.
— Старайтесь использовать чужой опыт, в этом нет ничего зазорного. Разбейте задачи на более мелкие. До вас уже кто-то наступил на эти грабли и решил проблему. Но будьте осторожны — используйте только удачные паттерны.
UX

— Мы понимаем наши задачи и думаем какие готовые шаблоны мы можем применить. Например, не имеет смысл делать какую-то революционную систему регистрации пользователя, если только ваш проект не весь посвящен упрощению процесса регистрации.
— Дальше вам нужно создать недостающие шаблоны взаимодействия. Здесь придется придумывать и изобретать.
— Опишите удобным для вас способом как будет происходить взаимодействие. Это могут быть прототипы или какой-то еще способ, который вас нравится.
UX

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

А вот главная страница справочно-правовой системы Право.ru — здесь использован прием, который называется “постепенное раскрытие”. Сначала мы показываем пользователю самое важное — строку поиска, как только он передвинет курсор, появятся дополнительные возможности. Это помогает фокусироваться на главном.
UX

Дизайн интерфейса — это копирайтинг. Лучшие интерфейсы не нарисованы, но написаны. Вам постоянно придется думать, что написать или как назвать кнопку. Каждая буква имеет значение…
UX

Здесь мы видим пример приложения для Windows Phone 7. Все написано текстом. Но давайте не будем забегать вперед, мы подошли к завершающему этапу…
UX

Финальный этап работы — визуальный дизайн. Давайте поговорим о трендах в визуальном дизайне интерфейсов…
UX

— Кто-нибудь знает, что значит сквеморф или сквеморфический дизайн?… лично я не знал. Хотя все мы пользуемся такими интерфейсами.
— Сейчас это актуальный тренд в дизайне интерфейсов. Мы просто берем объекты реального мира и переносим на экран. Например, сейчас это не айпад вовсе, а книжная полка. Нужно просто взять книжку и начать читать.
UX

Вот, например, приложение Адресная книга из операционной системы Mac OS X. Она имеет кожаную обложку, закладку. Вот тут есть сгиб страниц и даже ниточки, которыми они прошиты. Внимание к деталям.
UX

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

Давайте рассмотрим какие есть плюсы у такого подхода:
— Интерфейсы выглядят знакомо, сразу понятно что делать
— Не возникает вопросов к дизайнерам: “За что деньги уплачены?!” Интерфейс выглядит “бохато”!
— Если интерфейс нарисован с любовью, то его интересно рассматривать
— Дизайнеры не упустят случая порисовать блики и тени. Думать-то особо не надо, только технику оттачивать.
UX

Есть у иконографического стиля и минусы:
— Интерфейс может быть неудобным. Ведь мы копируем неидеальный мир.
— Такой подход может мешать реализации новых возможностей и фич
— Возможно неоптимальное использование пространства экрана
— Может устаревать. Ярким примером служит метафора дискетки. Выросло поколение, которое никогда не видело дискет.
UX

— Физические кнопки — это круто и понятно. Но иконографический начинает исчерпывать свой потенциал. Нужно что-то новое.
— Компания Microsoft решила придумать что-то новое. Идея в том, чтобы отказаться от идеологии “панели управления” и начать делать интерфейсы в духе “журнальной верстки”…
UX

Так появилась концепция Metro UI. Полностью цифровой интерфейс, без копирования реального мира. Это инновационный подход, но сами принципы не новы…
UX

За основу был взят “интернациональный типографский стиль” или “швейцарский стиль дизайна”. Он появился в 50х годах прошлого века, уделяя особое внимание читаемости и чистоте. Сейчас это уже стало классикой дизайна. Но в те времена это было революцией…
UX

Еще одно направление, где черпали вдохновение разработчики Metro UI — навигация в публичных местах. Аэропорты, общественный транспорт, торговые центры. Главная задача — чтобы человек не потерялся.
UX

Концепция Metro UI противопоставляет себя иконографике и копированию объектов реального мира. Следует немедленно отказаться от всех текстур, бликов и тенюшек. Безжалостное упрощение.
UX

Вернемся к консоли автомобиля. Уверен, что каждый может сказать куда тут можно нажать и что тут можно покрутить.
UX

— Так же и кнопки на экране. Не нужно дополнительно объяснять, что на неё можно нажать.
— Но в Metro UI происходит отказ от такого подхода…
UX

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

Платформы Windows Phone и Windows 8 появились совсем недавно. Сейчас основная потребность связана с переносом уже существующих приложений.
— Вот, например, наше приложение Право.ру для iPhone. Его нужно перенести на платформу WP7.
— Но как это сделать? Просто скопировать интерфейс айфона — это будет неправильно!
— Приходится заново проектировать интерфейс с учетом принципов Metro UI.
UX

Я рассказал вам о этапах создания интерфейса. Но UI-дизайн — это только один раздел концепции опыта взаимодействия. Подход UX можно использовать и в бизнес-модели, и в маркетинге, и в копирайте. К сожалению отведенного времени мне никак не хватит, поэтому ограничимся только интерфейсом.
UX
Автор: @kortunov
Turbomilk
рейтинг 51,64

Комментарии (69)

  • +5
    Великолепно! Особенно понравилась кривая цели и стратегии в реальном интерфейсе(;
    • +2
      Соглашусь, графика просто отлична. Особенно про идею и реализацию :)
  • +3
    Отличная статья и презентация в моём наилюбимемшем METRO! По сути — много интересного, особо для начинающих. СПАСИБО!
  • 0
    Какой же Metro UI удобный. Завидую.
    • +17
      Какой же Metro UI неудобный, не завидую пользователям. Когда его проектирует отличный дизайнер и он интерфейс на английском (там большинство слов короткие), то это может смотреться привлекательно. Но когда его используют где попало и как попало, да еще на русском — это адский ад, мешанина из текста. Приходилось держать в руках Windows Phone, пробовал Windows 8 в разных версиях. Для меня проще когда глаз цепляется за визуальные маркеры (иконки, границы, подсветка), чем постоянное чтение ненужного текста на экране. Разве пользователь должен читать 15 пунктов интерфейса чтобы найти 16 или ему стоит помочь и привязать к этим пунктам иконки/пиктограммы. Кстати у Google в этом плане неплохо получается, упрощенные иконки, небольшая палитра цветов (монохромные иконки тоже убивают). Сколько людей столько и мнений :)
      • +4
        Дизайнерские решения авторов оси всегда упираются в непроходимую тупость разработчиков приложений к ней. Точно так же, как с метро, в говно превращали риббон, иконки, мастеров, тулбары и вообще всё, что только можно. Так что в этом плане ничего нового.
      • +2
        к сожалению сделать просто довольно сложно. У метро относительно низкий порог вхождения (рисовать можно не уметь вообще) поэтому зачастую мы видим не слишком качественные приложения.
        Второй причиной не качественности является то, что из-за доли, на wp7 делают приложение чисто до кучи, не слишком задумываясь о пользователях.
        а про русский маркет, то среди российских приложений (в том числе и на русском) я чаще встречаю качественные с точки зрения UI приложения. Во многом благодаря российскому DPE MS. В качестве примера могу привести приложения яндекса, приложение Mail.ru и приложение Город. Которые вполне нормально смотрятся с русским интерфейсом.
        Про иконки. Инфографика. Инфографика приветствуется в Metro стиле. К сожалению не все ее применяют
        • 0
          Про простоту и порог вхождения верно сказали, тут как раз и кроется корень зла. Разработчики смотрят на интерфейс и думают: «Да что там дизайнить, блоки текста по квадратам раскидал», такая простота обманчива. Инфографика в Metro преимущественно монохромная, часто упрощенная до уровня когда она становится не интуитивной. Еще раз повторюсь, Metro интерфейс может удивлять и нравиться когда над ним поработал отличный дизайнер, но возьмись этот дизайнер за разработку другого интерфейса я думаю вышло бы не хуже, а может даже лучше — мастерство не пропьешь. Считаю что Metro это скорее промежуточный шаг и в следующей версии Windows дизайнеры дойдут до того, к чему движется Google.
          • 0
            А вам не кажется, что Гугл просто придерживается середины между МС и Эппл?
            • 0
              Не скажу со 100% точностью, но кажется Google стал склоняться к такому интерфейсу чуть раньше чем появился Windows Phone, до этого Zune и прочее было лишь пробным шагом. У Apple местами выходит очень привлекательный интерфейс, но как отмечено в статье приходится придумывать новую логику поведения для старых объектов реального мира.
              • 0
                Гугл начал менять дизайн с гугл+ который появился в прошлом году. wp7 вышел осенью 2010, представили его еще в январе того же года.
      • –1
        > Разве пользователь должен читать 15 пунктов интерфейса чтобы найти 16

        Неужели там нет поиска нужного пункта по вводу первых букв? ИМХО это лучший вариант, который в принципе нереализуем когда иконки *вместо* (а не вместе с) текстом.

        Или Metro предназначен только для девайсов без клавиатуры?
        • 0
          Вообще-то да, он больше для планшетов и смартфонов. С клавиатурой там проблемы, но даже там где она есть мне кажется это не лучший вариант, для поддержки скорости как в Intellisense нужна встроенная индексация команд, программ, файлов и прочих внутренних объектов. С другой стороны Intellisense хорош там где ты точно знаешь что ищешь и набор команд всегда в голове, а как найти название команды в новом приложении если вы его ни разу в глаза не видели? Как его решили назвать по-английски/по-русски?
          • +1
            Мне кажется, линуксы давно ответили на эти вопросы.
            1. Читать документацию. Это не сильно сложнее чем тыкаться по незнакомым иконкам.
            2. Команды никогда не должны переводиться. Сообщения и документация переводится, команды — нет.
  • +10
    Интересно, чем вызвана необходимость наличия настолько большой кнопки «Спам» в интерфейсе диалога? По мне так это серьезный косяк. Пользователь может ожидать там кнопку «Отправить» или что-то подобное, но не такую здоровенную кнопку «Спам», которую случайно нажать очень просто. По мне так лучше ее снизу вообще убрать, переместив вправо вверх и окрасив в красный свет.

    image
    • +5
      Действительно. Я бы точно «жмякнул» ее вместо «Отправить».
      Хотя может она превращается в «Отправить» при начале ввода текста? Все равно странно.
      • +1
        Это приложение Selloby — сервис частных объявлений. Можете посмотреть реализацию дизайнерского решения (ссылки на приложения на сайте selloby.ru/)
        • 0
          На Андрюшу себе установил. Там по другому интерфейс сделан. При чем отличается и от того, что в маркете на скринах. Кнопка «спам» есть только при просмотре объявления, а в диалоге ответа ее нет. При чем там нет и кнопки «Отправить». Т.е. если я написал сообщение, а потом свернул клаву, чтобы прочитать предыдущие сообщения, мне придется снова открывать клаву, чтобы отправить. Мелочь, конечно…
        • +1
          Ах, да: статья понравилась, хорошо читается.
  • +2
    Отличнейшая статья-презентация!
  • +1
    Большое спасибо!
  • +8
    Красивое оформление!
    Но картинки маловаты, надо бы побольше, а то вообще ничего не видно!
    • 0
      Это сарказм? :) Если действительно нужна картинка побольше, то на кажду можно нажать и посмотреть более крупную версию на Flickr.
      • +3
        Вообще-то сарказм, я палец замазолил скролить страничку. :)
  • +1
    Денис, замечательная статья/презентация!
    Интересно ваше мнение:
    Вы считаете что за METRO UI будущее всех интерфейсов?
    • 0
      Рад, что понравилось! Что касается подхода Metro UI, то, конечно, не все интерфейсы в будущем будут такими. Просто мне, как человеку долгие годы создававшему «фантики», такой подход кажется очень свежим. Микрософт молодцы, что рискнули и поставили на новый стиль. Да, стиль Metro UI не во всем последователен и есть много проблем. Но желаю его разработчикам «продержаться» подольше и не скатиться в попсовые градиенты и блики.
  • +3
    Про скьюморф и иконографиеский стиль — не совсем согласен.
    Интерфейс может быть неудобным. Ведь мы копируем неидеальный мир
    Интерьфейс может быть всегда неудобным, даже если мы не копируем неидеальный мир

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

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

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

    Могли бы вы разложить по пунктам переемущества Метро над iOS интерфейсом?

    А статья классная, спасибо.
    • +2
      Спасибо за комментарий! У меня есть идея как-нибудь сделать подробное сравнение iOS и Metro UI.

      Что касается «иконографического стиля», вы меня не совсем правильно поняли. Наверное, мне стоило использовать слово «метафорический». Так как речь идет не о «иконка vs текст», а про «метафора из физического мира vs цифровой подход». В «цифровых» интефрейсах есть пиктограммы, которые работают так же как иконки.
      • +2
        Но в НЕ метафорическом интерфейсе нужно обеспечивать возможность легкого распознования нажимаемой и не нажимаемой области, предполагаемых мест где и какой контент находится.
        Разве в МетроЮИ с этим все хорошо?
        • +1
          С этим есть проблемы. Причем они начинаются даже не с пользователей, а с разработчиков, которым дизайнер должен делать гайды с «нажимающимися» зонами.
        • 0
          при правильном проектировании Metro проблем с тем что нажимается, а что нет — нет. Там нажимается все, что вы хотите нажать. Принцип довольно простой, вы видите информацию, хотите больше — тапайте. Для действий используются кнопки, для действий относящихся ко всему контенту экрана — кнопки на нижней панели. Ссылки выносят за рамки приложения. Все достаточно понятно.
    • 0
      Могли бы вы разложить по пунктам переемущества Метро над iOS интерфейсом?


      ведь всё просто — Metro для будущих поколений.

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

      А вот поколение для Metro UI UX

      www.youtube.com/watch?v=aXV-yaFmQNk

      Им будет сложно объяснить, почему книжки в iOS iBook стоят на полках, а не просто списком. Но зато они будут точно знать — если текст и/или иконка в квадратике, значит сюда надо жать.

  • +1
    Денис, спасибо за статью!
    Слушал её еще на РИФе, довольно интересно.
    Думаю, что успех «цифрового подхода» напрямую зависит от успешности/провала Windows 8. Если распознавание кнопок/ссылок из Metro UI будет подсознательным, то это круто) Но пока не придумали наведение без тапа в смартфонах, с обратной связью у кнопок и ссылок будут проблемы. Подход Apple тут побеждает.

    С приложениями, в принципе, все ясно. Для яблочников — метафоричность, для виндофилов — лаконичность, андроид, рим — что-то среднее.

    А что думаете по поводу веб-дизайна? В тренде сейчас как раз больше «метафоричность» на волне успеха продукции Apple. Может ситуация изменится осенью после выхода W8?
    • +1
      Ну статья как раз больше про веб-дизайн. Думаю, что трендом будет — интерактивность и анимация. Что-то похожее на flash-сайты, но без флеша.

      Я не выступаю за стиль Метро. Просто на его примере можно хорошо объяснить, что такое UX.
  • +1
    Денис, live.digicast.ru/embed/1065?language=ru#time1334818257 — тут есть видео.
  • +3
    Один шрифт Segoe UI все вытягивает сам.
  • 0
    Материал изложен отменно, браво!
  • +6
    Статья приятная, но выбор иконок для подписей удивляет.

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

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

      А вот про остальные я тоже не понял.
    • +1
      Спасибо за вопросы! Эти пиктограммы, без сомнения, изюминка моей презентации. Их нарисовал зачечательный иллюстратор Евгений Арцебасов. Пользуясь случаем, передаю ему привет!

      Почему картинка, похожая на разбитое сердце, возле надписи «работаю UX дизайнером»?
      Все просто. Я влюбился в дизайн и стал дизайнером. Потом я стал заниматься дизайном интерфейса. Чем больше я это делал, тем сильнее понимал, что работаю я инженером, а не дизайнером. Моё сердце разбито!

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

      Почему патроны возле «структуры информации»?
      Патроны аккуратно лежат в магазине, они структурированы.

      Почему горящая ёлка возле «описания взаимодействия»?
      Я намекаю не то, что не нужно себя зажимать на это этапе. Многие дизайнеры, не продумывают взаимодействия совсем. А я призываю думать об этом и быть оригинальными. Тогда даже самая скучная елка «зажгет»!

      Так и задумано было?
      Безусловно, я подумал перед тем, как сделать. Именно этому учит нас подход UX.
      • +7
        Неслабый у вас ассоциативный ряд.

        Я полагал, что иконка должна иллюстрировать идею, то есть от картинки до текста должно быть минимальное количество самых простых шагов. Поэтому на иконке «печать» обычно нарисован принтер, на иконке «отрезать» — ножницы и так далее. В данном случае я не смог самостоятельно сделать эти шаги. Разве что про патроны я предполагал нечто подобное, но сам бы выбрал другой вариант. Например в случае «разбитого сердца» нужно сделать аж четыре шага. Мне кажется это несколько противоречит подходу UX (ну или я просто туго соображаю).
        • +3
          Все дело в том, что я учитываю контекст и носитель. Изначально это слайды, которые я показывал на проекторе. Люди на конференции бывают разные: кому-то этот доклад покажется очевидным, кто-то занять еще чем-то, кто-то не обратит даже внимания. В некотором роде, это «пасхальные яйца» расчитаные на то, чтобы заинтересовать и развлечь слушателя.

          Мне стоило переделать картинки для поста на Хабре, но стало лень.
          • +1
            Спасибо. Теперь ясно.
  • +3
    Прекрасная статья, хотя и сумбурно весьма — вроде бы есть структура, но, увы, нет гармонии и равновесия.
  • +1
    Большое спасибо за статью, Денис.
    Хотелось бы увидеть редизайн Право.ru не только под WP, но и под Android. Сейчас приложения копией айфоновского и слегка чужеродно.
  • 0
    Спасибо за статью, и особенно за эту мысль: «Дизайн интерфейса — это копирайтинг. Лучшие интерфейсы не нарисованы, но написаны. Вам постоянно придется думать, что написать или как назвать кнопку. Каждая буква имеет значение...»
  • +1
    Подскажите название шрифта, используемого на картинках в статье
    • +1
      Segoe UI, кажется
    • +1
      Myriad Pro Light не?
    • 0
      Segoe WP
  • +1
    Segoe WP — семейство на базе Segoe UI специально для WP7
    • 0
      Бинго!
      • +2
        Просто насмотрелся уже на него! Каждый день используем.
  • 0
    Кто-нибудь знает, что значит скьюоморф или скьюоморфический дизайн?… лично я не знал. Хотя все мы пользуемся такими интерфейсами.
    Понятие «skeuomorphism», «skeuomorph» происходит из археологии (откуда распространилось и на другие области) и имеет устоявшийся русский вариант — «скевоморфизм», «скевоморфный». В Рунете почему-то за пределами археологический словарей и специальной литературы не известно. Самое время это исправить.
    • 0
      Как скажете. Уже третий раз буду править :)
  • –1
    Отличная статья, спасибо! но по моему последний piechart с косяками получился:



    • +1
      На самом деле, это просто другие картинки слишком хорошие получились. Поэтому пирог привлекает внимание. Это стандартная диаграмма из Keynote, на проекторе козюли все-равно не видны.
  • 0
    > Если мне нужно купить, например, бритву, то я выберу ту, что с экранчиком. Вроде бы, на бритье это не влияет, но это совершенно иной, более высокий, уровень взаимодействия с пользователем.

    По-моему, автор слишком зациклен на своей профессии.
    • 0
      Суть маркетинга. Вау-эффект. Пользователю не важно качество бритья, даже процесс уже не важен, а главное чтобы выглядело круто и инновационно, а маркетологи этим пользуются во всю.
    • 0
      А помоему то, что автор зациклен на профессии — большой плюс в некоторых профессиональных планах.
      • 0
        Возможно. Но мне становится немного не по себе от мысли, что на лежащих у меня на столе одноразовом стаканчике, шариковой ручке и наушниках есть экраны, и каждый из них постоянно пытается со мной «взаимодействовать». Некоторые вещи должны просто выполнять свою одну конкретную функцию, не пытаясь «взаимодействовать» обратно.
  • 0
    Дезориентирующий когнитивный эффект при чтении статьи — ожидаешь что текст который не на картинках тебе прочтут голосом. Все таки, мое личное мнение, слайды из презентации для статьи не подходят.
    Статья — это информация в виде текста. Картинки в ней помогают привлекать внимание(чтобы вообще прочесть статью) либо пояснять непонятное.
    • 0
      Согласен. Тоже читал с трудом — то мелкий текст, то огромный с тезисами. Неудобно.
  • 0
    Замечательно. Коротко, по делы — текст лучшее и не сделаешь.
    Слайды — это вообще отдельный шик :)
    • 0
      *делу
  • 0
    Спасибо за пост!
    На эту тему нашел для себя классную подборку книг, но статья в сжатой форме помогает ответить на основные вопросы создания UI.
    Еще раз спасибо автору

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

Самое читаемое Дизайн