Интенсив в Британке по UX/UI. День 6. Дополненная реальность
vadimgoncharov
Количество произнесенных междометий и слов типа "Офигеть!" зашкаливало по сравнению со всеми днями интенсива. А всё потому, что к нам пришел Андрей Судариков из компании Playdisplay и показал нам другой мир.

Про выставку:
  • Фотограф с вай-фай картой фоткает, а фотки складываются сразу в фото-стену.

  • Самое больное место -- это тормознутый тачскрин. Приходилось даже закупать в Китае тачрамку и накладывать поверх обычного ТВ, чтобы хоть чуть-чуть получше был отклик.

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

  • Работает на всей полиграфии.

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


В общем:
  • Фэйстрекинг пока что не очень хорошо работает: есть ложные срабатывания.

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

  • Дополненная реальность подходит для всех групп юзеров (одинаково в восторге как дети, так и взрослые).

  • На станции метро "Международная" установлены короба Медиамаркта, в них светятся баннеры, можно навести устройство и купить ТВ или ноутбук. Уже были успешные продажи.

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

  • В Парке Горького сделали панорамы, перемещающие людей в прошлое (с помощью старых фоточек).

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

  • Можно наносить дополненную реальность на одежду (например: шарф-визитка).

  • Человек всегда запоминает ощущение от дополненной реальности, а не сам объект. Допустим, если у нас есть кружка, при наведении на которую, что-то появляется, то человек про кружку может и не вспомнит (забудет форму), но само ощущение ему запомнится.

  • Современные продукты, современные гаджеты запоминаются ощущениями.


Про развитие технологии:
  • Бюджет увеличился в 30 раз за последние три года, технология развивается.

  • Очень сильно растут бюджеты на дополненную реальность.

  • Технология новая, поэтому проектировщики интерфейсов пока ничего не умеют.

  • Рынок еще в зачаточном состоянии.

  • На данном этапе развития рынка важно обучить аудиторию, поэтому конкуренты помогают в этом (воспитывают аудиторию).

  • Очки сильно изменят рынок.

  • Скоро устройство будет понимать реальную трехмерную картину мира. Это еще сильнее изменит рынок.

  • Следующий этап развития -- это голограммы (вырастут из дополненной реальности).


Видео:

Интенсив в Британке по UX/UI. День 5
vadimgoncharov
В этот день был выходной.

Интенсив в Британке по UX/UI. День 3 и день 4
vadimgoncharov
День 3
Прорывное мышление
Этот день мы провели с ребятами из Вандерфул. Они показали нам, каким образом можно создавать инновации и что этому обычно мешает.

Сначала нас сочно вывели из зоны комфорта: мы стали играть в игры.

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

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

Далее была серия игр на диалог: один человек делал другому какое-нибудь предложение (например: "поехали в отпуск"), а собеседник должен был отвечать "нет". Потом, в следующем раунде, собеседник отвечал "да, но". И третьем раунде, собеседник отвечал "да и".

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

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

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

Лекция
  • Методика прорывного мышления появилась в дизайн-студии FrogDesign, основанной Хармутом Эсслингером.

  • Хармут Эсслингер в 1980 годах изменил фирменный стиль Эппла. Он применил белый цвет, что на тот момент в других компаниях, таких как HP, было просто недопустимо. Стив Джобс сказал своё "да, и", тем самым целая линейка продуктов была развита.

  • Основная проблема прорывных идей в том, что их боятся и отклоняют. Когда получено доверие человека, принимающего решение, становится всё просто. Пример с Эсслингером и Джобсом, одобрившим идею с белым цветом.

  • Любой человек способен генерировать прорывные идеи. Изначальная специализация дизайнера не имеет никакого значения (первоначально Джонатан Айв дизайнил унитазы). Важна свобода от стереотипов.

  • Надо смотреть на привычные стереотипы и пробовать взламывать их. Например, можно ли мыть пол шваброй без воды. Или возможно ли заправлять электромобиль дома.

  • В России под словом "инновация" подразумевается какое-то великое открытие, хотя инновация -- это всегда маленькие шажки.


Примеры прорывного мышления:
  • Компания Corning придумала проводящее стекло: youtube.com/watch?v=X-GXO_urMow

  • Компания LittleMissMatched подумала, почему нельзя продавать носки не парой, а по одной или по три штуки? И придумала носки, которые можно комбинировать друг с другом. facebook.com/LittleMissMatched

  • Компания ECOtality подумала, почему бы не заряжать электромобиль дома: youtube.com/watch?v=VbRKyKAaBAg


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


Затем к нам пришел Юра Ветров из Мэйл.ру и рассказал про то, как проектировщики становятся продуктовыми дизайнерами.

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

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

День 4
Ярослав рассказал про разработку UX-стратегии:
  • Не стоить тратить деньги на догоняющую стратегию, нужно обратить внимание на те угрозы, которые у нас есть, на конкурентов. Честно сказать себе правду.

  • Желательно указать цели. Указать kpi (например 5%), хотя бы для того, чтобы начать тренироваться оценивать kpi. Даже если потом ошибемся, мы хотя бы будем знать насколько сильно.

  • Выявляем скрытое истинное желание пользователя (по принципу "а зачем").

  • Думаем о пользе (что ожидает аудитория получить от сервиса).

  • Полезное действие. Мы должны не только давать пользователю полезное действие, но и делать полезное действие себе (хотим, чтобы они нажимали на кнопку "купить" или позвонили по телефону).

  • Аудит сайта всегда надо начинать с аналитики (с каких поисковых запросов приходят юзеры).

  • Обязательно знать, как работать с Гугл-аналитикой.

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

  • В итоге мы получаем "гипотезы улучшений", мы не можем гарантировать результат, поэтому и гипотезы (чтобы гарантировать 100% результат, нужно опросить 100% юзеров, что невозможно).

  • Никогда не глушить идеи клиента, стараться подумать как можно развить их (в режиме "да и").

  • Нужно узнать у клиента: может ли он как-то бесплатно обеспечить трафик на сайт.

  • Узнать: есть ли бюджет, позволяющий существовать проекту какое-то время без прибыли (например, пока не накопится пользовательская база), готовы ли пойти на это.

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

  • Группы пользователей (мы должны брать всех, кто взаимодействует с сайтом). Например, не забыть помимо соискателей и работодателей добавить и рекламодателей (которые генерируют нам прибыль).

  • Перспективы -- то как различные группы юзеров видят одну и ту же страницу.

  • Затем общие блоки для всех юзеров можно обьединить в единые логичекие блоки (как элемент интерфейса).

  • Делаем градацию фич по шкале low/medium/high.

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

  • MVP -- запускаемся быстро с минимальным запасом фич (это может быть стратегией продукта). Это необходимое и достаточное для функционирования продукта.

  • Количество найденных инсайтов очень сильно влияет на дизайн.



Потом к нам пришел Михаил Галушко -- информационный архитектор из компании Аис.
  • Проектировщик должен был быть хорошим дизайнером, хорошим менеджером, хорошим бэкендщиком, должен постоянно учиться (курсера и т. д.).

  • Через 5 лет уровень специалистов будут определять по количеству сертификатов на курсере.

  • Обязательно пройти курс по human-computer interaction на курсере.

  • Очень важно уметь критически относиться ко всей информации.

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

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

  • Должна быть методология.

  • Без бизнес аналитики и проектирования прототип не появляется.

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

  • Сократить число итераций и исключить вкусовщину.

  • Когда клиент видит прототип он доволен и считает себя частью процесса

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

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

  • Майндмэп -- это итог разговора с клиентом.

  • Ситуационный анализ -- с чем нам клиент обратился, зачем ему сайт

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

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

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

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

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

  • Всегда обсуждаем с клиентом: а что не так со старым сайтом? Если какой-то раздел работает, то это старое решение можно оставить. Был кейс: в А/Б-тестировании старая анкета показала лучшие результаты по сравнению с новой.

  • "Я отправил заявку и что? Когда мне перезвонят?" К вопросу о том, что пользователи могут растеряться после отправки заявки.

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

Интенсив в Британке по UX/UI. День 2
vadimgoncharov
Второй день день получился шикарным. Отчет будет немного поменьше, чем в первый день.

Ярослав рассказал про бренд и брендинг. Основные тезисы:
  • Когда мы придумываем сок, мы делаем не только сок, но и то, как мы с ним работаем: упаковка, продвижение, работа с аудиторией.

  • Люди любят одну сладкую водичку и не любят другую чисто из-за бренда.

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

  • Когда мы говорим Самсунг, у человека сразу возникают образы товаров этой компании.

  • Бренд -- концепция, красивая метафора, которая все объединяет.

  • Брендинг -- формирование образа.

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

  • Крутые агентства сначала вырабатывают емкую концепцию, которая легко будет считываться аудиторией. И уже из этой концепции делается фирстиль, лого, стиль интерфейса. Детально изучить кейсы movingbrands.com

  • О пользе: бренд должен нести что-то полезное людям.

  • Экосистема: как пример -- Эппл. Им удалось связать все свои продукты (Эппл ТВ, Айфон, Макбук, Айпад).

UX-стратегия:
  • Интервью со стейкхолдерами. Встречаемся только с ними -- с инициаторами -- с людьми, которые заинтересованы, теми кто вложил свои деньги.

  • Воркшоп с командной. Собираем людей в одном месте и извлекаем инфу, чтобы сделать крутой продукт.

  • Конкурентный анализ

  • Анализ пользовательских маршрутов -- найти точки боли, извлечь, проанализировать, понизить их или убратью

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

UX-дизайн
  • Диаграммы переходов (главная страница -- форма поиска -- результат поиска -- звонок) анализируем все маршруты с позиции "как люди принимают решения, чтобы перейти к действию-звонку". В итоге мы приходим к тому, что у нас три посадочные страницы.

  • Диаграммы состояний.

  • Вайрфреймы.

  • Коммуникационная стратегия.

  • Опять интервью со стейкхолдерами.

  • Определение целей и задач бизнеса.



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


Потом к нам пришел Степан Зинин и учил нас пользоваться Акшуром. А еще Степан рассказал нам, что основным трендом в ближайшее время будет анимация, поэтому желательно учиться ей как можно быстрее, чтобы быть клевым. Также будут рулить вот такие вот вещи: dribbble.com/shots/1254439--GIF-Float-Label-Form-Interaction (обратите внимание, как плейсхолдер превращается в заголовок).


И уже под вечер к нам пришел Саша Пелевин из "Яндекс.Маркета". Он рассказал про то, как работается в крупном проекте, какая атмосфера там царит.

Также Саша рассказал про свой взгляд на понятие UI и UX. Посоветовал нам самим определить, что же значат эти понятия, и где проходит граница между ними. Саша в фэйсбуке потом пояснил: "Вчера в последней части доклада посоветовал искать личное понимание фундаментальных понятий (на примере UI и UX). Но суть не в конкретном результате (который вообще-то будет видоизменяться), а в постоянном процессе поиска, в работе с материалом такой природы."

Интенсив в Британке по UX/UI. День 1
vadimgoncharov
Интенсив начался с того, что куратор курса Ярослав Шуваев рассказал нам о том, как правильно слушать курс. Нужно быть максимально открытыми и давить в себе скептицизм, чтобы не блокировать, но впитывать сочный поток мыслей от разных лекторов. На мой взгляд, это очень хорошая позиция. Даже если не согласен с каким-то мнением, лучше, как позднее сказал второй куратор курса Никита Обухов, дать этому мнению шанс. В любом случае, мы ничего не теряем, а только приобретаем.


Психофизиология
Ярослав начал курс с рассказа про психофизиологию. Эта дисциплина рассматривает поведение человека, опираясь на физиологию мозга (к примеру, рассматривается как работает память или внимание).

Магическое число 7+-2
  • С точки зрения работы памяти человеку удобнее всего держать в голове 7+-2 объекта. Если объектов становится больше 9, то человеку будет некомфортно, и он будет всячески стараться избегать такого запоминания.

  • Для запоминания более 9 объектов применяются специальные схемы запоминания (какие?).

  • Если объектов очень много их группируют так, чтобы групп опять же было 7+-2. В группах можно также группировать объекты.

  • В ходе обсуждения возникла интересная беседа по поводу форм. Допустим, есть форма из 3-х полей и форма из 20 полей. В формах пользователь заполняет информацию о себе, чтобы компания приняла какое-то решение на основе этих данных. Какую форму выбрать? Логичнее ту, в которой меньше полей, так как пользователю придется меньше информации удерживать в уме, да и заполнять меньше. Но в то же время пользователь даст компании слишком мало информации, и сотрудникам придется тратить больше времени на то, чтобы созвониться с человеком и выяснить остальную информацию. А это затратно. Поэтому иногда проще сделать форму из большего количества полей, когда у компании не так много времени и денег на обработку данных.


Геометрическая память
  • Мозг привыкает к расположению объектов в пространстве, тем самым сокращая затраты энергии на вдумчивый поиск объекта. Пример: иконки в Айфоне. Через какое-то время пользователь уже автоматически находит пальцами нужный объект. Если пользователь перемешает иконки в случайном порядке, то ему придется завново привыкать к новому расположению и заново тратить энергию.

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

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

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


Группировка
  • Человек умеет объединять рядом располагающиеся объекты в группы. Это умения есть у него с рождения.

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


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

  • Но если у нас будет много объектов сложной формы, то внимание пользователя может рассеяться. Именно поэтому очень хорошим решением может являться отсечение всех лишних сложных объектов с оставлением только одного или двух главных сложных. Пример: сайт Эппла с рекламой Айпада, где на белом фоне показана картинка Айпада (сложный объект) и текст о том, что это за продукт (второй и последний сложный объект).

  • Обратный контраст не работает: простая форма в куче сложных форм сразу же затеряется.

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

  • Если нужно выделить какой-то объект, можно заблюрить все остальные.


Лицо
  • Человек всегда является самым важным в композиции. Если показано лицо человека, то мозг сразу же начнет изучать форму этого лица. Это одна из форм привлечения внимания.

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


Контраст цвета
  • Всегда привлекает внимание, когда один цвет сильно отличается от другого.

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

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


Контраст размера
  • Объект можно увеличить в размере относительно других объектов, тогда всё внимание перейдет к нему.

  • Правильно подобранные размеры заголовков и текстов помогают распределить внимание пользователя для комфортного чтения.


Анимация
  • Важно использовать микроанимации.

  • Анимация может объяснять.

  • Анимация должна быть к месту.

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

  • Рывки воспринимаются, как плохо проработанный продукт. Если все плавно, то возникает ощущение комфорта и крутости приложения.


Чтение
  • Это поздний навык, который не работает бессознательно, как реакция на свет.

  • Положительная динамика слева направо.


Изображения и текст
  • Сначала картинки

  • Мозг всегда идет по самому ленивому пути

  • Если контент картинки нерелевантен, то картинка мозгом пропускается.

  • Картинка экономит место относительно текста.

  • Картинка контекстно-зависима.

  • Целевое действие может спокойно выполняться на основании одной картинки (к примеру, репост на основе картинки).


Иконки
  • Шестеренка и облако для некоторых людей может быть непонятна.


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

  • Длинную строку тяжело читать. Приходится напрягать геометрическую память.

  • С плохим интерлиньяжем можно легко ошибиться и запутываться в строках.

  • Важно группировать на параграфы, так как человек прыгает по параграфам во время чтения.

  • Для статей должен использоваться принцип обратной пирамиды.





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

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

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

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




Дизайн-исследования
I. Первичное
1. Этнография:
  • Наблюдение за людьми (идем в банк и наблюдаем за людьми, как они берут кредиты).

  • Self-reflection (анализ собственного опыта).

  • Shadowing (следование за другим человеком и фиксирование его действий).

2. Качественные исследования (открытые вопросы) и количественные исследования (закрытые вопросы да/нет).
3. Проще когда двое ведут интервью. Один говорит, другой записывает.

II. Second research
1. Чужой опыт
  • Скриншоты сайтов.

  • Смотрим какие блоки чаще встречаются


2. Narrative board (lifestyle research)
  • Это набор картинок, которые рассказывают о мире заказчика. К примеру, если мы рассказываем о загородной недвижимости, то мы покажем картинки людей, у которых есть загородные дома, как им круто и хорошо, как они клево проводят время и так далее.

  • Нарративборд выделяет ключевые визуальные образы для зрителя.


3. Style board
Это набор картинок для задания настроения. Берутся картинки уже готового чужого дизайна.

Расширенный бриф
Заполняется после глубинного интервью

Основные топики брифа
1. Research conclusion
  • Написание вывода по каждому этапу исследования

  • Отчетом может быть статья на тему. Пример f-i.com/fi/airlines

2. Stickers Session
  • С помощью point of view задачи конкретезируются





Дальше опять продолжил Ярослав.

Основные элементы пользовательского интерфейса
  • Xerox -- mac os 1 -- появился скевоморфизм (папка, корзина).

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

  • Микрософт сделали прорыв с метро-UI, уйдя от скевоморфизма.

  • Но что сейчас можно считать кнопкой? Сейчас кнопку можно перепутать с полем ввода

  • В Айос 7 контекстозависимые инпуты, которые сливаются с фоном.

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

  • Узнать про расположение кнопок "Ок" "Отмена".



Юзабилити-тестирование
  • Айтрекинг, мысли вслух.

  • Таблица количества выполненных задач, сколько ошибок и так далее.

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

  • Удовлетворенность, по которой можно видеть боль.


Карточная сортировка
Про каталоги
  • Всегда существует проблема классификации, но юзеры про эту классификацию ничего не знают (например юзеры в одном разделе ищут то, что мы переместили в другой)

  • Чтобы преодолеть эту проблему юзается карточная сортировка


Закрытая карточная сортировка
Даем набор категорий и просим отсортировать

Открытая карточная сортировка
Собрать собственные группы и отсортировать

Возможно стоит юзать теговый способ сортировки, а не ирерхаческий



Полезно:
gov.uk/design-principles
sixux.com

Итоги 2013
vadimgoncharov
Одно из ключевых событий года -- я стал работать фронтэнд-разработчиком в Мэйл.ру, таким образом полностью сфокусировавшись на фронтэнде. Со временем из подписок были удалены блоги по Симфони, Yii, PHP и прочему бэкенду. Но добавлено еще больше по яваскрипту и интерфейсам.


  • Как ни странно, но удалось поработать с Symfony2. Очень красивая архитектура, хоть и присутствуют свои минусы.

  • Плотно поработал с Бэкбоном. Пришел к выводу, что Бэкбон дает отличный старт для того, чтобы понять как создавать хорошую архитектуру. Потом Бэкбон уже не нужен и скорее мешает (не вижу смысла таскать Underscore и jQuery в зависимостях), а единственная полезная вещь -- это Backbone.Events.

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

  • Начал писать код с помощью requirejs. Очень удобно в самом начале файла подключать зависимости не через define, а через require. Получается, что мы всегда знаем какие модули подключены к этому файлу: никаких глобальных или непонятно откуда взявшихся переменных.

  • Написал кучу тасков к Гранту.

  • Познал сочность Стайлуса.

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

  • Хорошо так покопался в исходниках jQuery. Пришел к выводу, что jQuery во многих случая не нужен. Слишком много лишних проверок. В некоторых случаях обычный jQuery.find может вызывать reflow/repaint. В общем, если создавать компоненты с помощью паттерна Passive View, когда вьюха инкапсулирует свою внутреннюю механику для презентера, то в самой вьюхе можно спокойно писать без jQuery, используя чистый яваскрипт.

  • Изучил проблемы с reflow/repaint и проблемы с подвисанием браузера из-за долгой работы яваскрипта. В первом случае проблема решается грамотной реорганизацией записи и чтения CSS-свойств, а во втором случае есть много вариантов решения проблемы: это и переход с замыканий в циклах .forEach(function(){}) к простым циклам for, и разбиение цикла на части с помощью setTimeout, и использование веб-воркеров.

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

  • Начал изучать Скалу.

  • Очень сильно заморочился на анимациях. Самое сложное, что я до сих пор обдумываю -- как грамотно написать компонент управления анимацией, чтобы если юзер совершит какое-то безумное действие (много раз кликнет по всем кнопкам), то система смогла грамотно обработать такой ввод и не выдать каких-то анимационных артефактов. С помощью setTimeout-анимации это решается просто, но если мы хотим совершать анимации на GPU с помощью транзишнов, то здесь появляется много сложностей. Решения есть, но они кажутся неидеальными.
10 января иду на интенсив Интерактивный дизайн: UX & UI Design в Британке. Каждый день буду писать отчет.

?

Log in