Блоготворение

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

Проекты   Все заметки   Подписка на новости   rxletter@gmail.com

Консультация по интерфейсу. Приложение для HR.

Читатель спрашивает:

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

В правильном ли я направлении двигаюсь и как вам идея главного экрана приложения? Нужно ли писать крупно цифры по каждому отдельному блоку или достаточно вместо последнего аватара в каждом блоке писать остаток в кружке? Остальные экраны ещё не готовы.

Отвечаю

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

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

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

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

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

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

Не знаю, что делают иконки человечков, но это иконки Андроида. Лучше их не использовать в Айосе.

Бесплатная UX/UI консультация

Если вы делаете интерфейсы и забуксовали — напишите мне на rxletter@gmail.com, расскажите о задаче, которую вы решаете, приложите скриншот. Отвечу письмом, при необходимости созвонимся по Скайпу. Постараюсь помочь.

Как создать темные и светлые вариации цвета

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

Чтобы сделать темную вариацию основного цвета:

  • Hue сдвинуть в сторону меньшей освещенности;
  • Saturation увеличить;
  • Brightness уменьшить.

Чтобы сделать светлую вариацию основного цвета:

  • Hue сдвинуть в сторону большей освещенности;
  • Saturation уменьшить;
  • Brightness увеличить.

В Sketch цветовая модель переключается в доке выбора цвета, нужно нажать на буквы RGB или HSB.

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

Сортировка артбордов в Sketch

Я часто использую Sketch в связке с Invision. Синхронизация происходит через плагин Craft. Скрины заливаются в Invision в той последовательности, в которой артборды расположены в Layer List. И это не удобно, так как визуальное расположение артбордов на столе не совпадает с последовательностью в списке слоев. Решает эту проблему плагин Automate Sketch. Он, конечно, комбайн с большим количеством ненужных функций, зато работает :)

Законы UX

Закон Фиттса. Чем дальше и меньше цель, тем больше нужно времени, чтобы попасть в неё.

Закон Хика. Время принятия решения возрастает с увеличением количества и сложности вариантов выбора.

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

Закон Паркинсона. Любая задача будет растягиваться до тех пор, пока не будет потрачено все свободное время.

Правило близости. Близкие друг к другу объекты воспринимаются в группе.

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

Эффект Фон Ресторфф. При наличии большого числа похожих объектов, вероятнее всего запомнится тот, что отличается от остальных.

Эффект Зейгарник. Люди помнят незавершенные задачи лучше, чем завершенные.

Выводы делаем сами. Чуть подробнее со ссылками на источники и клевыми плакатами все это описано на lawsofux.com

Пользовательские сценарии

Пользовательские сценарии помогают определить и объяснить наличие функций интерфейса. Создание сценариев начинается с составления портрета пользователя.

Портрет пользователя

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

Пример портрета пользователя

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

Пользовательский сценарий

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

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

Базовый сценарий

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

Расширенный сценарий

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

Варианты использования

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

  1. Рубильная машина Джека ломается.
  2. Он находит руководство пользователя в интернете и выясняет название и номер модели.
  3. Вбивает название модели и номер модели в поисковике.
  4. Находит результаты, которые кажутся ему правильными.
  5. Вводит имя модели в поле поиска на сайте.
  6. Просматривает результаты поиска.
  7. Находит список рубильных машин и нажимает на ссылку.
  8. Смотрит описание для машины от производителя.
  9. Сканирует страницу в поисках модели.
  10. Находит ссылку и скачивает руководство пользователя в формате PDF.
  11. Смотрит PDF-руководство, сканирует на поиск своей модели.
  12. Ищет ту часть, которая, как ему кажется, нуждается в обслуживании.
  13. Находит и копирует номер гидравлического насоса.
  14. Ищет по номеру детали в поисковой строке
  15. На странице поиска не находит результатов и решает позвонить в магазин
  16. Сканирует страницу в поисках контактной информации и нажимает «Контакты».
  17. Не находит телефоны, заполняет форму обратной связи и нажимает «Отправить».
  18. Ждет звонка.

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

Карта сценария

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

Бесплатная UX/UI консультация

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

Короче, если вы делаете интерфейсы и забуксовали — напишите мне на rxletter@gmail.com, расскажите о задаче, которую вы решаете, приложите скриншот. Отвечу письмом, при необходимости созвонимся по Скайпу. Постараюсь помочь.

Как избежать конфликтов. Синхронизация ожиданий.

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

Чтобы не допустить конфликт нужно синхронизироваться, чтобы оба человека ожидали одинаковый результат:

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

Другой пример. Заказчик ожидает получить макет в пятницу в 12:00. Дизайнер не присылает макет в указанное время, не выходит на связь. Через 2 дня приходит с макетом и говорит, что возникли какие-то сложности и ему понадобились еще 2 дня чтобы закончить работу. Заказчик ожидает макет, но не получает его в указанное время. Дизайнер ожидает, что ничего страшного не произойдет, но оказывается, что дополнительного времени не было и бизнесу нанесен ущерб. Возникает конфликт.

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

Самое плохое, что можно сделать при рассинхронизации ожиданий — продолжать действовать по своему усмотрению. В большинстве случаев это приводит к конфликту.

Основная причина забывчивости

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

Эксперимент

Первый кусок информации. Посмотрите на эти пары слов, запомните. Через пять минут попробуйте восстановить список.

  • Маша — Отчет
  • Ира — Письмо
  • Дима — Конверт
  • Коля — Баг
  • Вася — Сервер
  • Ваня — Мышь
  • Петя — Собеседование
  • Катя — Встреча
  • Рома — Телефон
  • Лена — Скайп

Второй кусок информации. Его тоже запомните и через пять минут попробуйте восстановить список.

  • Маша — Счет
  • Ира — Часы
  • Дима — Звонок
  • Коля — Код
  • Вася — Сеть
  • Ваня — Тестировщик
  • Петя — Стол
  • Катя — Ноутбук
  • Рома — Клавиатура
  • Лена — Скрипт

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

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

Супермозг. Руководство по эксплуатации.

Сила привычки

Книга «Сила привычки» Чарльза Дахигга помогает понять как устроены привычки, как они возникают, проявляются, как реагирует на них человек и что об этом думает мозг.

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

Мозг анализирует все действия человека. Если одно и то же действие повторять многократно то оно входит в привычку. Мозг всё время пытается избавится от лишней деятельности, поэтому из частых действий он составляет шаблоны поведения. Когда человек снова оказывается в ситуации, при которой выполнялись действия из шаблона — мозг запускает этот шаблон. Это позволяет снизить нагрузку на мозг в период выполнения шаблонных действий. В конце он снова вступает в игру чтобы убедиться что все прошло как надо.

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

Состав привычки

Если разделить привычку на составляющие — её можно изучать, понимать и пытаться изменить. У каждой привычки есть три элемента:

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

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

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

Как менять привычку

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

В примере с шоколадкой изменить триггер можно несколькими способами:

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

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

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

Как сформировать привычку

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

Самое интересное — инструкцию по изменению привычки — напишу в следующий раз :)

Не можешь работать — отдохни

У кого-то получается применять метод Pomodoro: дни становятся продуктивнее, работа чередуется с отдыхом, куча закрытых тасков — прелесть. Но мне метод не подошел. Не получалось втискивать себя в определенные временные отрезки работы и отдыха. Работаешь на подъеме, полно энергии, а тут надо прерваться и идти отдыхать. Или работа не идет, но таймер заведен и нужно есть очередную помидорку — напряжение.

В итоге забил на все это и теперь делаю по-другому. Если работа прет — работаю стараясь не отвлекаться. Когда работа не идет самое простое решение — переключиться на другую задачу. Но такая возможность есть не всегда. И тут приходит на помощь отдых.

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

Почему это работает

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

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

Ctrl + ↓ Ранее