#UX_задача №1. Получить ИИН

Клиент: Госуслуги Казахстана

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

Поскольку не являюсь гражданином, я должен идти в центр обслуживания (ЦОН) лично. Я прихожу в ближайший в своём районе, где раньше сам делал ИИН полгода назад. Меня довольно быстро обслуживают и говорят, что решение будет через несколько дней в виде СМС.

Проходит несколько дней, я получаю смс-отказ с формулировкой «обратитесь в ЦОН».

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

Задача: составить пользовательский путь и гипотезы об улучшении клиентского опыта с учётом разных технических ограничений и без них.

Рекомендую делать это в Figma, FigJam или Miro.


Ограничения:

1. Нет возможности менять приложение и функционал сайта Госуслуг.

2. Нет возможности обслуживать иностранцев во всех ЦОНах, нужен миграционный.

3. Нет доступа к сервису СМС-уведомлений.

4. Слишком дорого оповещать всех иностранцев в стране об изменениях в процессе получения ИИНа по СМС.


Как будет меняться решение в зависимости от разных ограничений?

PS: но в целом Госуслуги в Кз — ван лав. Когда была волна мобилизации, очень быстро среагировали и грамотно распределили желающих получить ИИНы по отделениям банков, открыли дополнительные ЦОНы.

Ответ: www.tg-me.com/slashdesigner/942

@slashdesigner #первые_шаги #UX

#UX_задача №1, про ИИН. Решение

В видео я накидал варианты сценария получения ИИН и проговорил ограничения.

https://youtu.be/TAyOqivp234

- Исходная задача
- Кит с UX-флоу
- Фигма-файл с решением

@slashdesigner #первые_шаги #UX

Разбор #UI №4. Переключатель темы

Когда-то дизайнер из Словакии Роман Клчо сделал этот шот с объёмным переключателем тёмой темы. Как и большинство работ на Дрибле, UI там это отдельный вид искусства. Это красиво, но непрактично, поскольку довольно трудно в разработке и не особенно осмысленно даже с точки зрения UX. Гораздо проще наследовать настройку темы от операционной системы, а не переключать на уровне приложения. Но если очень хочется, то можно.

Швейцарский разработчик Мортен Джаст (в прошлом тимлид в Google) в качестве эксперимента реализовал этот переключатель на SwiftUI и даже сделал поддержку VoiceOver.

Жаль, что SwiftUI со всем его хипстерским удобством пока не светит крупным продуктам, которые пока вынуждены поддерживать iOS до версии 12, а его можно использовать только начиная с iOS 13. Естественно, никакой обратной совместимости.

У Мортена кстати много экспериментальных крутых штук на его сайте mortenjust.com, а также своя рассылка на Substack. В твиттер-треде он обещал, что выложит код в следующем выпуске.

Разбор деталей реализации:

1. Как компонент реагирует на изменение форм-фактора

2. Как реализован эффект перспективы

3. Тень из размытого прямоугольника

4. Шумы

5. Переход в замедлении

6. VoiceOver

Поражаюсь, какие же они все крутые.

@slashdesigner
#для_профи #анимация #SwiftUI

Копилка UX-задач

Я собираю UX-задачи для новой рубрики в канале. Если у тебя есть задача, которая требует проектирования опыта, пожалуйста, оставляй её в комментариях к этому посту. Самые интересные задачи я буду разбирать в видео на YouTube.

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

Этой рубрикой я ставлю цель поделиться логикой мышления при проектировании опыта.

PS: исправил уровень звука в пилотном выпуске, но из-за перезалива потерял лайки и комментарии. Спасибо за лучи поддержки, приятно, что такой контент зашёл.

@slashdesigner #техническое

#UX_задача №2. Подключение двух устройств к одним наушникам

Клиент: Sony

Приложение: Headphones

Джоб-стори: У меня два устройства, на которых я слушаю музыку: телефон и компьютер. По пути на работу удобно слушать музыку на телефоне. Когда я прихожу в офис, удобнее продолжать использовать те же наушники на компьютере.

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

Файл в Figma содержит два сценария: включение режима нескольких устройств и подключение второго устройства.

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

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

@slashdesigner #для_профи #UX

#стать_лидом №8. Дизайнер завышает сроки

Вопрос: ставлю дизайнеру задачи, которые займут понятное время. Делать их нужно срочно, заказчик давит. Дизайнер отвечает, что не уложится за день, хотя я бы раскидал их за пару часов. Как действовать?

slashd.ru/lead/slow-designer →

Варианты:
1. Дизайнер не понимает, каков реальный объём работы
2. Он демотивирован и уклоняется от работы

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

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

Опытный лид, выскажи своё мнение! Как ты договариваешься со своими дизайнерами, сколько им можно уделить времени на задачу?

@slashdesigner #для_профи

#дайджест за январь 2023

Январь получился плодотворным на контент. Чтобы ты ничего не пропустил, я собрал посты прошлого месяца:

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

Ковыряем ChatGPT и про отличие гайдов Apple и Google и удивляемся, что он сечёт

Актуализируем темы канала на год — можно посмотреть, что наиболее интересно читателям, и о чём я и другие авторы будем писать

Классный канал про веб-дизайн — наши друзья

Видео: UX-задача №1 про выдачу ИИН, решение — первое видео после долгого перерыва в эфире, за полчаса набросал решения по улучшению опыта

UI: фэнси переключатель тёмной темы на SwiftUI с разбором реализации от автора

Копилка UX-задач для новой рубрики, здесь собираем новые задачи для будущих видео.

Далее: Февраль 2023 →

@slashdesigner

#снек Люди везде ищут смысл

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

Почему так происходит?
Каждая фотография специалиста на лендинге встаёт в один смысловой ряд с другими.

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

У человека сработал визуальный паттерн, который он видел в других местах. Его предыдущий опыт таков, что эффект обесцвечивания фото у него ассоциируется со статусом «умер». Эффект усилился, когда остальные фото в подборке случайно оказались цветными.

@slashdesigner #первые_шаги

#UX_задача 2. Подключение двух устройств к одним наушникам. Решение

В часовом видео разобрал текущий дизайн из приложения Sony Headphones Connect. Составил схематичные флоу и предложил 4 варианта, как улучшить существующий опыт.

Видео: https://youtu.be/ObtcYOFuHgU →

Исходная задача

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

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

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

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

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

@slashdesigner #UX #для_профи

Справочник /f внезапно сломался и выдаёт 404, разбираемся.

Пока можно пользоваться notion-версией.

Обновлено: Починили.

@slashdesigner #техническое

#статья Про типографику в дизайн-системах

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

1. Какие платформы собираемся поддерживать: iOS, Android, Web, macOS, Windows. Всё это совершенно разные миры, которые трудно синхронизируются.

2. Является ли какая-либо из них доминирующей для нашего продукта? На всех стульях не усидеть. То, что изначально опирается на iOS, может деградировать для веба или Android, и наоборот, не использовать потенциал iOS, например, поддержку Dynamic Type.

3. Собираемся ли делать дизайн на базе единого шрифта или единой шрифтовой пары для всех систем? Готовы ли отказаться от гайдов и классных возможностей определённых систем (вариативные шрифты на Android и в вебе против Dynamic Type на iOS).

4. Собираемся ли мы использовать семантическую систему или абстрактную, основанную только на размерах? Смешивать их нежелательно. Одна только абстрактная шкала недостаточно себя объясняет и может быть сложно понять, какой стиль правильно использовать в каком месте. Слишком жёсткая семантика раздувает список стилей и приводит к дублям.

5. Что будет, если потребуется добавлять новые стили между существующими? Например, между H1 и H2. Не будут ли они ломать шкалу стилей? А что будет, если в шкале появляются разные модификации стилей, вроде normal, medium, bold?

Здесь ответом может быть внедрение нескольких слоёв токенизации, которые между собой не смешиваются, а существуют параллельно, например: body.500-heavy, где body — семантическая группа, 500 — условный средний размер по шкале размеров, а heavy — font-weight по абстрактной шкале.

@slashdesigner #дизайн_системы #для_профи

Oculus Go Fuck Yourself

Отремонтировать VR-очки Oculus Go в Алматы оказалось просто невозможно. Обратился в два сервиса, оказался один и тот же, только с разными сайтами и номерами, и мастера уже нет. Там дали наводку, что этим могут заниматься мастера в ЦУМе, но у них только телефоны-планшеты. Целый этаж сервисов огромного ТЦ, но все мотают головой и шарахаются от меня как от огня.

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

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

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

#Алматы #VR

#дайджест за февраль 2023

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


Что вышло в феврале:

Дизайнер завышает сроки — как лиду договориться со своими дизайнерами о времени на задачи

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

Разбор UX-задачи №2, про подключение двух устройств к одним наушникам, большое видео с процессом проектирования. Задачи собираем в копилке, пока там всего один кандидат на новый выпуск.

Замктка про типографику в дизайн-системах — что следует учитывать с самого начала, когда закладываем самое ядро нашей дизайн-системы

Заметка Oculus Go Fuck Yourself про разочарование в VR

Не публиковал, а стоило: лекция Виктора Теплова про рефакторинг дизайн-системы Ozon

@slashdesigner

#снек Ещё один забавный дизайн-ляп про внимание к деталям

В продолжение темы про дизайн-ляпы.

Мне пришло маркетинговое письмо от платформы faderpro.com, на которой обучают музыкальному продакшну.

Заголовок: «Давай, расскажи нам, как мы можем тебе помочь»

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

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

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

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

Для этого нужны UX-тесты, на которых такие детали обязательно вылезут.

@slashdesigner #первые_шаги