Дизайн интерфейсов

BinKing готов

25.07.2020 04:23:05 |

Автор: admin

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

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

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

Нюансы

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

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

Пример подключения архива с помощью специального плагина

Имея архив с базой данных, вы можете воспроизвести работу API на своей стороне. Ниже пример кода с использованием Node.js и фреймворка express. Работа показанного в примере API идентична работе того API, которое будем представлять мы.

const express = require('express')const fs = require('fs')const path = require('path')const app = express()const banks = fs.fileReadSync(path.resolve(__dirname, 'path/to/data/banks-all.json'))const bins = fs.fileReadSync(path.resolve(__dirname, 'path/to/data/bins-all.json'))const withLogos = bank => {  return {    ...bank,    bankLogoBigOriginalSvg: bank.bankAlias + '-big-original.svg',    bankLogoBigInvertedSvg: bank.bankAlias + '-big-inverted.svg',    bankLogoSmallOriginalSvg: bank.bankAlias + '-small-original.svg',    bankLogoSmallInvertedSvg: bank.bankAlias + '-small-inverted.svg',    formBankLogoBigSvg: bank.bankAlias + '-big-' + bank.formLogoScheme + '.svg',    formBankLogoSmallSvg: bank.bankAlias + '-small-' + bank.formLogoScheme + '.svg',  }}app.get('/form', (req, res) => {  const { cardNumber } = req.query  const cardNumberCuted = cardNumber.replace(/D/g, '').substr(0, 6)  const bankAlias = bins[cardNumberCuted]  const bank = banks[bankAlias]  if (!bank) return res.send('null')  res.send(withLogos(bank))})app.get('/bank', (req, res) => {  const { bankAlias } = req.query  const bank = banks[bankAlias]  if (!bank) return res.send('null')  res.send(withLogos(bank))})app.get('/banks', (req, res) => {  const { banksAliases } = req.query  const result = banksAliases.split(',').map(bankAlias => {    const bank = banks[bankAlias]    return bank ? withLogos(bank) : null  })  res.send(result)})

Где взять архив?

У меня. Сейчас отдам дёшево, как доделаю будет дороже.

Подробнее..

Категории: Javascript , Дизайн , Дизайн мобильных приложений , Дизайн интерфейсов , Платежные системы , Разработка под e-commerce , E-commerce , Cardinfo

Материалы Avito Design Talk видео и презентации

17.12.2020 18:19:07 |

Автор: admin

Привет! Недавно прошёл наш митап для дизайнеров соспикерами изТинькофф, Циана иАвито. Ребята рассказывали про краудсорсинг, точки роста дизайнера, его значимости наразных скоростях работы команды иобсуждали сайд-проекты накруглом столе.

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

Точки роста для дизайнера вкрупной компании Настя Ларкина, Авито

Работа дизайнера намного больше, чем красивые картинки. Настя рассказала, как участвовала взапуске чат-бота Авито Работы, икакие точки роста нашла для себя накаждом этапе создания продукта отформирования consumer journey map дообщения сразработчиками иредакторами.

00:00 Представление темы испикера
01:44 Что такое Авито Работа ивчём еёглавный продуктовый челлендж
08:09 Customer journey map Работы
09:13 Проблема продукта иеёрешение
13:16 Создание интерфейса чат-бота: исследование
17:22 Передача макетов вразработку
21:12 Проверка решения наканареечных запусках
26:49 Осознанная работа стекстом иеёвлияние нарезультат
31:00 Вывод: точки роста для дизайнеров

Посмотреть презентацию Насти

Значимость дизайнера наразных скоростях разработки Алексей Кандауров, Циан

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

00:00 Представление темы испикера
06:52 Определения: что такое значимость иразные скорости работы
13:13 Если нет ограничений посрокам, апостановка задач нечёткая
14:16 Край спектра нормальной продуктовой разработки
15:12 Другой край спектра нормальной продуктовой разработки
16:20 Метод быстрых экспериментов growth hacking
18:06 Дизайн кодом
22:20 Чему нас учит дизайн-сообщество
26:30 Мифы продуктового дизайна икак насамом деле
30:42 Парадокс значимости

Посмотреть презентацию Алексея

Дизайн вкраудсорсинге икраудсорсинг вдизайне Владимир Погорелов, Тинькофф

Владимир рассказал, как устроен внутренний краудсорс-проект Тинькофф под названием Klecks, поделился способами улучшенияUX, когда упроекта нетUI, иснижения порога входа вприложения для программистов.

00:00 Представление темы испикера
00:37 Что такое краудсорсинг иKlecks
02:58 Эволюция интерфейсов Klecks
14:20 Краудсорсинговые UX-исследования Тинькофф
21:23 Какие тесты можно проводить накрауде
22:38 Начто обращать внимание накрауд-тестах

Посмотреть презентацию Владимира

Круглый стол Личные проекты дизайнеров

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

На этом всё. Увидимся нановых митапах!

Подробнее..

Категории: Краудсорсинг , Конференции , Дизайн , Митапы , Дизайн мобильных приложений , Блог компании авито , Дизайн интерфейсов , Продуктовый дизайн , Ux/ui

MLHCI что исследуют на стыке машинного обучения и человеко-компьютерного взаимодействия

03.07.2020 16:05:03 |

Автор: admin

Многие убеждены, что область Human Computer Interaction (HCI или человеко-компьютерное взаимодействие) сводится только к проектированию сайтов или приложений, а основная задача специалиста удовлетворить пользователей, увеличивая на несколько пикселей кнопку лайка. В посте мы хотим показать, что это совсем не так, и рассказать, что происходит в HCI на стыке с исследованиями машинного обучения и искусственного интеллекта. Возможно, это позволит читателям посмотреть на эту область с новой для себя стороны.

Для обзора мы взяли труды конференции CHI: Conference on Human Factors in Computing Systems за 10 лет, и с помощью NLP и анализа сетей социтирования посмотрели на темы и области на пересечении дисциплин.

В России особенно силен фокус на прикладных задачах проектирования UX. Многие события, которые помогали росту HCI за рубежом, у нас не произошли: не появилось iSchools, ушли из науки многие специалисты, занимавшиеся близкими аспектами инженерной психологии, и т. д. В результате профессия возникала заново, отталкиваясь от прикладных задач и исследований. Один из результатов этого виден даже сейчас это крайне низкая представленность российских работ по HCI на ключевых конференциях.

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

Время от времени мы слышим вопросы, как это направление связано (и связано ли вообще) с машинным обучением и анализом данных. Чтобы ответить на них, мы обратились к исследованиям последних лет, представленным на конференции CHI.

В первую очередь мы расскажем, что происходит в таких областях, как xAI и iML (eXplainable Artificial Intelligence и Interpretable Machine Learning) со стороны интерфейсов и пользователей, а также как в HCI изучают когнитивные аспекты работы специалистов data science, и приведем примеры интересных работ последних лет в каждой области.

xAI и iML

Методы машинного обучения интенсивно развиваются и что важнее с точки зрения обсуждаемой области активно внедряются в автоматизированное принятие решений. Поэтому исследователи все чаще обсуждают вопросы: как пользователи, не являющиеся специалистами в машинном обучении, взаимодействуют с системами, где подобные алгоритмы применяются? Один из важных вопросов такого взаимодействия: как сделать, чтобы пользователи доверяли решениям, принятым на основе моделей? Поэтому с каждым годом все более горячей становится тематика интерпретируемого машинного обучения (Interpretable Machine Learning iML) и объяснимого искусственного интеллекта (eXplainable Artificial Intelligence XAI).

При этом, если на таких конференциях, как NeurIPS, ICML, IJCAI, KDD, обсуждают сами алгоритмы и средства iML и XAI, на CHI в фокусе оказываются несколько тем, связанных с особенностями дизайна и опытом использования этих систем. Например, на CHI-2020 этой тематике были посвящены сразу несколько секций, включая AI/ML & seeing through the black box и Coping with AI: not agAIn!. Но и до появления отдельных секций таких работ было достаточно много. Мы выделили в них четыре направления.

Дизайн интерпретирующих систем для решения прикладных задач

Первое направление это дизайн систем на основе алгоритмов интерпретируемости в различных прикладных задачах: медицинских, социальных и т. д. Такие работы возникают в очень разных сферах. Например, работа на CHI-2020 CheXplain: Enabling Physicians to Explore and Understand Data-Driven, AI-Enabled Medical Imaging Analysis описывает систему, которая помогает врачам исследовать и объяснять результаты рентгенографии органов грудной клетки. Она предлагает дополнительные текстовые и визуальные пояснения, а также снимки с таким же и противоположным результатом (поддерживающие и противоречащие примеры). Если система предсказывает, что на рентгенографии видно заболевание, то покажет два примера. Первый, поддерживающий, пример это снимок легких другого пациента, у которого подтверждено это же заболевание. Второй, противоречащий, пример это снимок, на котором заболевания нет, то есть снимок легких здорового человека. Основная идея сократить очевидные ошибки и уменьшить число обращений к сторонним специалистам в простых случаях, чтобы ставить диагноз быстрее.

CheXpert: автоматизированное выделение областей + примеры (unlikely vs definitely)

Разработка систем для исследования моделей машинного обучения

Второе направление разработка систем, которые помогают интерактивно сравнивать или объединять несколько методов и алгоритмов. Например, в работе Silva: Interactively Assessing Machine Learning Fairness Using Causality на CHI-2020 была представлена система, которая строит на данных пользователя несколько моделей машинного обучения и предоставляет возможность их последующего анализа. Анализ включает построение причинно-следственного графа между переменными и вычисление ряда метрик, оценивающих не только точность, но и честность (fairness) модели (Statistical Parity Difference, Equal Opportunity Difference, Average Odds Difference, Disparate Impact, Theil Index), что помогает находить перекосы в предсказаниях.

Silva: граф связей между переменными + графики для сравнения метрик честности + цветовое выделение влиятельных переменных в каждой группе

Общие вопросы интерпретируемости моделей

Третье направление обсуждение подходов к задаче интерпретируемости моделей в целом. Чаще всего это обзоры, критика подходов и открытые вопросы: например, что понимать под интерпретируемостью. Здесь хотелось бы отметить обзор на CHI-2018 Trends and Trajectories for Explainable, Accountable and Intelligible Systems: An HCI Research Agenda, в котором авторы рассмотрели 289 основных работ, посвященных объяснениям в искусственном интеллекте, и 12 412 публикаций, цитирующих их. С помощью сетевого анализа и тематического моделирования они выделили четыре ключевых направления исследований 1) Intelligent and Ambient (I&A) Systems, 2) Explainable AI: Fair, Accountable, and Transparent (FAT) algorithms and Interpretable Machine Learning (iML), 3) Theories of Explanations: Causality & Cognitive Psychology, 4) Interactivity and Learnability. Кроме того, авторы описали основные тренды исследований: интерактивное обучение и взаимодействие с системой.

Пользовательские исследования

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

Инструментов и алгоритмов интерпретации появилось очень много, поэтому возникает вопрос: как понять, какой же алгоритм выбрать? В работе Questioning the AI: Informing Design Practices for Explainable AI User Experiences как раз обсуждаются вопросы мотивации использования объясняющих алгоритмов и выделяются проблемы, которые при всем многообразии методов еще не решены в достаточной степени. Авторы приходят к неожиданному выводу: большинство существующих методов построены так, что отвечают на вопрос почему (почему у меня такой результат), в то время как пользователям для принятия решений нужен еще и ответ на вопрос почему нет (почему не другой), а иногда что сделать, чтобы результат изменился.

В работе говорится также о том, что пользователям нужно понимать, каковы границы применимости методов, какие у них есть ограничения и это нужно явно внедрять в предлагаемые инструменты. Более ярко эта проблема показана в статье Interpreting Interpretability: Understanding Data Scientists' Use of Interpretability Tools for Machine Learning. Авторы провели небольшой эксперимент со специалистами в области машинного обучения: показали им результаты работы нескольких популярных инструментов для интерпретации моделей машинного обучения и предложили ответить на вопросы, связанные с принятием решения на основе этих результатов. Оказалось, что даже специалисты слишком доверяют подобным моделям и не относятся к результатам критически. Как любой инструмент, объясняющие модели можно использовать неправильно. При разработке инструментария важно учитывать это, привлекая накопленные знания (или специалистов) в области человеко-компьютерного взаимодействия, чтобы учитывать особенности и потребности потенциальных пользователей.

Data Science, Notebooks, Visualization

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

Поэтому предметом этой области HCI становится разработка новых способов визуализации неопределенности в предсказаниях моделей, создание систем для сравнения анализа, проведенного разными способами, а также анализ работы аналитиков с инструментами, например с Jupyter notebooks.

Визуализация неопределенности

Визуализация неопределенности одна из особенностей, которые отличают научную графику от презентационной и бизнес-визуализации. Довольно долго ключевым в последних считался принцип минималистичности и фокуса на основных трендах. Однако это приводит к чрезмерной уверенности пользователей в точечной оценке величины или прогноза, что может быть критичным, особенно, если мы должны сравнивать прогнозы с разной степенью неопределенности. Работа Uncertainty Displays Using Quantile Dotplots or CDFs Improve Transit Decision-Making анализирует, насколько способы визуализации неопределенности в предсказании для точечных графиков и кумулятивных функций распределения помогают пользователям принимать более рациональные решения на примере задачи оценки времени прибытия автобуса по данным мобильного приложения. Что особенно приятно, один из авторов поддерживает пакет ggdist для R с различными вариантами визуализации неопределенности.

Примеры визуализации неопределенности (https://mjskay.github.io/ggdist/)

Однако часто встречаются и задачи визуализации возможных альтернатив, например, для последовательностей действий пользователя в веб-аналитике или аналитике приложений. Работа Visualizing Uncertainty and Alternatives in Event Sequence Predictions анализирует, насколько графическое представление альтернатив на основе модели Time-Aware Recurrent Neural Network (TRNN) помогает экспертам принимать решения и доверять им.

Сравнение моделей

Не менее важный, чем визуализация неопределенности, аспект работы аналитиков сравнение того, как часто скрытый выбор исследователем разных подходов к моделированию на всех его этапах может вести к различным результатам анализа. В психологии и социальных науках набирает популярность предварительная регистрация дизайна исследования и четкое разделение эксплораторных и конфирматорных исследований. Однако в задачах, где исследование в большей степени основано на данных, альтернативой могут стать инструменты, позволяющие оценить скрытые риски анализа за счет сравнения моделей. Работа Increasing the Transparency of Research Papers with Explorable Multiverse Analyses предлагает использовать интерактивную визуализацию нескольких подходов к анализу в статьях. По сути, статья превращается в интерактивное приложение, где читатель может оценить, что изменится в результатах и выводах, если будет применен другой подход. Это кажется полезной идеей и для практической аналитики.

Работа с инструментами организации и анализа данных

Последний блок работ связан с исследованием того, как аналитики работают с системами, подобными Jupyter Notebooks, которые стали популярным инструментом организации анализа данных. Статья Exploration and Explanation in Computational Notebooks анализирует противоречия между исследовательскими и объясняющими целями, изучая найденные на Github интерактивные документы, а в Managing Messes in Computational Notebooks авторы анализируют, как эволюционируют заметки, части кода и визуализации в итеративном процессе работы аналитиков, и предлагают возможные дополнения в инструменты, чтобы поддерживать этот процесс. Наконец, уже на CHI 2020 основные проблемы аналитиков на всех этапах работы, от загрузки данных до передачи модели в продакшн, а также идеи по улучшению инструментов обобщены в статье Whats Wrong with Computational Notebooks? Pain Points, Needs, and Design Opportunities.

Преобразование структуры отчетов на основе логов выполнения (https://microsoft.github.io/gather/)

Подводя итог

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

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

Подробнее..

Категории: Интерфейсы , Визуализация данных , Машинное обучение , Учебный процесс в it , Дизайн интерфейсов , Ui/ux дизайн , Вшэ , Вшэ спб , Блог компании питерская вышка

21 метод UX-исследований какой выбрать

20.07.2020 06:19:52 |

Автор: admin

Нравится тебе оно или нет, но при создании ИТ-продукта никак не обойти тему проверки UX на прочность. Любой специалист, которому хоть сколько-нибудь не наплевать на свою работу, хочет, чтобы результаты потраченных человеко-часов были по достоинству оценены конечным пользователем.

Часть методов UX-исследований настолько очевидны и прямолинейны, что у некоторых из ИТ-шников при первом знакомстве в классификацией тестов появится логичный вопрос А что, кто-то этого не делает? и следующий за ним Их ещё не поувольняли?.

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

В этой статье собран 21 метод UX-исследований. Некоторые из них простые и банальные, некоторые более изощрённые. Выбирай тот, что тебе по вкусу. Но сначала посмотрим, какими характеристиками они отличаются.

Отличия методов

Количественный/качественный. Часть исследований даёт измеримый результат, например, собранный системой аналитики или посчитанный по итогам опроса. Такие исследования мы зовём количественными. В других случаях возможна только качественная оценка, т.е. состоящая из суждений исследователя или участника (удобно неудобно, просто запутанно и т.п.).

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

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

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

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

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

Методы UX-исследований

1. Проверка концепции
2. Сортировка карточек
3. Фокус-группа
4. Этнографическое исследование
5. Привлечение к проектированию
6. Древовидное тестирование
7. Оценка предпочтений
8. Лабораторное исследование
9. Айтрекинг
10. Исследование дневников
11. Удалённое исследование
12. 5-секундный тест
13. Немодерируемое панельное исследование
14. A/B-тестирование
15. Юзабилити бенчмаркинг
16. Экспертный обзор
17. Кликстрим
18. Сбор обратной связи
19. Email-опрос
20. Исследование истинного намерения
21. Интервью

1. Проверка концепции (Concept Testing)

Качественный/количественный: возможны оба
Поведенческий/отношенческий: отношенческий
Участие продукта: смешанное
Этап: планирование

Обзор
Метод сосредоточен на выделении ключевых качеств продукта, чтобы определить, соответствуют ли они потребностям целевой аудитории. Тот, кто знаком с концепцией MVP (minimum viable product), наверняка понимает, о чём речь. Может выполняться как один-на-один, так и с большей аудиторией. Главная цель понять, есть ли хоть какая-то потребность в таком продукте.

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

2. Сортировка карточек (Card Sorting)

Качественный/количественный: возможны оба
Поведенческий/отношенческий: отношенческий
Участие продукта: естественное
Этап: планирование

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

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

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

3. Фокус-группа (Focus Groups)

Качественный/количественный: качественный
Поведенческий/отношенческий: отношенческий
Участие продукта: без участия
Этап: планирование, разработка

Обзор
Группа из 310 участников под руководством модератора обсуждает свои взгляды на будущий продукт. Роль модератора скорее поддерживать поток мнений, чем направлять его. Фокус-группа может ответить на несколько основных вопросов, но не должна превращаться в интервью (см. метод 21).

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

4. Этнографическое исследование (Ethnographic Field Studies)

Качественный/количественный: возможны оба
Поведенческий/отношенческий: возможны оба
Участие продукта: естественное
Этап: планирование, разработка

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

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

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

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

5. Привлечение к проектированию (Participatory Design)

Качественный/количественный: качественный
Поведенческий/отношенческий: отношенческий
Участие продукта: естественное или по сценарию
Этап: планирование, разработка

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

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

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

6. Древовидное тестирование (Tree Testing)

Качественный/количественный: количественный
Поведенческий/отношенческий: поведенческий
Участие продукта: без участия
Этап: планирование, разработка

Обзор
Участники работают с текстовой версией сайта или приложения, вся структура которого представлена в виде дерева. Категории верхних уровней раскрываются на вложенные категории и т.д.

Задание найти тот или иной пункт меню, ориентируясь по этой схеме. Результат распределение кликов по категориям. Наглядно демонстрирует, насколько структура продукта может ввести в заблуждение.

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

7. Оценка предпочтений (Desirability Studies)

Качественный/количественный: возможны оба
Поведенческий/отношенческий: поведенческий
Участие продукта: естественное, по сценарию
Этап: планирование, разработка

Обзор
Участникам показывают несколько вариантов дизайна. Они должны оценить каждый из них набором количественных и качественных характеристик. Например: скорость, простота, полезность, предсказуемость, свежесть, авторитетность и т.п. Характеристики предоставляются заранее, часто на карточках для удобства.

Когда использовать
Когда необходимо понять, какие субъективные ощущения вызывает у пользователей дизайн. Целесообразно проводить на ранних стадиях разработки продукта.

8. Лабораторное исследование (Usability-Lab Studies)

Качественный/количественный: качественный
Поведенческий/отношенческий: поведенческий
Участие продукта: по сценарию
Этап: разработка

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

Подробнее о том, как подобное исследование проводится, можно почитать в статье UX-исследование ДБО: наш опыт, ошибки и открытия.

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

9. Айтрекинг (Eyetracking)

Качественный/количественный: возможны оба
Поведенческий/отношенческий: поведенческий
Участие продукта: естественное или по сценарию
Этап: разработка

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

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

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

10. Исследование дневников (Diary/Camera Studies)

Качественный/количественный: возможны оба
Поведенческий/отношенческий: отношенческий
Участие продукта: естественное
Этап: разработка

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

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

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

11. Удалённое исследование (Remote Usability Studies)

Качественный/количественный: скорее качественный
Поведенческий/отношенческий: поведенческий
Участие продукта: по сценарию
Этап: разработка, подведение итогов

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

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

12. 5-секундный тест (Five second test)

Качественный/количественный: качественный
Поведенческий/отношенческий: отношенческий
Участие продукта: без участия
Этап: разработка, подведение итогов

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

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

13. Немодерируемое панельное исследование (Unmoderated Remote Panel Studies)

Качественный/количественный: возможны оба
Поведенческий/отношенческий: возможны оба
Участие продукта: естественное или по сценарию
Этап: разработка, подведение итогов

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

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

Когда использовать
Подходит при исследовании продуктов с долгим циклом использования (фитнес-приложения, мониторинг здоровья и т.п.). Также полезен для анализа отложенных событий (например, уведомлений) и при планировании обновлений.

14. A/B-тестирование (A/B Testing)

Качественный/количественный: количественный
Поведенческий/отношенческий: поведенческий
Участие продукта: естественное
Этап: разработка, подведение итогов

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

После достижения статистической значимости делается вывод, какой вариант победил по выбранному KPI (например, покупки в приложении). Проводится в специальных сервисах, таких как Google Optimize для сайтов и Optimizely для приложений.

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

15. Юзабилити бенчмаркинг (Usability Benchmarking)

Качественный/количественный: количественный
Поведенческий/отношенческий: поведенческий
Участие продукта: по сценарию
Этап: разработка, подведение итогов

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

Когда использовать
Когда нужно отследить или продемонстрировать прогресс в оптимизации продукта. Для оценки эффективности решения как такового, в особенности при переходе между циклами разработки.

16. Экспертный обзор (Expert Review)

Качественный/количественный: качественный
Поведенческий/отношенческий: отношенческий
Участие продукта: естественное или по сценарию
Этап: разработка, подведение итогов

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

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

17. Анализ кликстрима (Clickstream Analysis)

Качественный/количественный: количественный
Поведенческий/отношенческий: поведенческий
Участие продукта: естественное
Этап: разработка, подведение итогов

Обзор
Анализ данных о том, какие страницы и в каком порядке посещал пользователь. Легко провести с помощью системы аналитики Google Analytics, Яндекс.Метрика, Firebase, Mixpanel. Позволяет выявить проблемы, связанные с навигацией по сайту или приложению. Не помогает с поиском их причин. Для выяснения причин стоит использовать юзабилити-исследования (методы 8, 11).

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

18. Сбор обратной связи (Customer Feedback)

Качественный/количественный: возможны оба
Поведенческий/отношенческий: отношенческий
Участие продукта: естественное
Этап: подведение итогов

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

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

19. Email-опрос (Email Survey)

Качественный/количественный: возможны оба
Поведенческий/отношенческий: отношенческий
Участие продукта: без участия
Этап: подведение итогов

Обзор
Анкетирование пользователей по email, в отличие от сбора обратной связи, общее и не триггерное. Касается предыдущих взаимодействий с продуктом, поэтому оценивает только его восприятие аудиторией. Проще для проведения, чем интервью (см. метод 21), но выше вероятность отказа. Количество вопросов обычно не превышает 10, чтобы не отпугнуть респондентов.

Когда использовать
Для анализа эффективности действующего продукта и сравнения с конкурентами.

20. Исследование истинного намерения (True-Intent Studies)

Качественный/количественный: количественный
Поведенческий/отношенческий: возможны оба
Участие продукта: естественное
Этап: подведение итогов

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

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

Когда использовать
После запуска продукта, когда достаточный объём трафика достигнут. Чтобы узнать, отвечает ли разработка запросам пользователей, и выполняет ли задуманные функции.

21. Интервью (Interviews)

Качественный/количественный: качественный
Поведенческий/отношенческий: отношенческий
Участие продукта: без участия
Этап: подведение итогов

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

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

Итог

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

Спасибо Станиславу Лушину за помощь в написании статьи.
А также Елене Ефимовой за инфографику, Татьяне Китаевой за редактуру.

Список источников:
When to Use Which User-Experience Research Methods
7 Great, Tried and Tested UX Research Techniques
Five second tests
Tree Testing: Fast, Iterative Evaluation of Menu Labels and Categories

Подробнее..

Категории: Интерфейсы , Разработка веб-сайтов , Разработка мобильных приложений , Usability , Веб-дизайн , Дизайн интерфейсов , Ux design , Ux/ui , Usability-тестирование , Research , Методы ux-тестирования , А/б тестирование , Опросники

Дайджест продуктового дизайна, июнь 2020

31.07.2020 18:06:20 |

Автор: admin

Дайджест собирает свежие статьи по дизайну интерфейсов, а также инструменты, паттерны, кейсы, тренды и исторические рассказы с 2009 года. Я тщательно фильтрую большой поток подписок, чтобы вы могли прокачать свои профессиональные навыки и лучше решить рабочие задачи. Предыдущие выпуски: апрель 2010-май 2020.

Дайджест продуктового дизайна, июнь 2020

Дайджест продуктового дизайна, июнь 2020

Паттерны и лучшие практики

Design and Anatomy of a Push Notification 2020

Анализ структуры push-уведомлений от разных платформ, браузеров и программ от Lee Munroe. Бонусом идёт шаблон в Figma.

Communicating Changes Throughout the Buyers Journey A COVID-19 Case Study

Kim Flaherty из Nielsen/Norman Group сделала обзор приёмов информирования в интернет-магазинах по поводу ситуации с коронавирусом. Предупреждения об увеличенном сроке доставки и других ограничениях.

Selection controls UI component series

Подробный разбор состояний элементов форм для выбора (чекбоксы, радиокноки, тумблеры, чипы) от Тараса Бакушевича.

Mobile-App Onboarding An Analysis of Components and Techniques

Alita Joyce из Nielsen/Norman Group описывает паттерны для встречи нового пользователя в мобильных приложениях. При этом она советует по возможности избегать их.

3 Pitfalls to Avoid if Implementing Quick Views

Rebecca Hugo из Baymard описывает проблемы со всплывающим слоем быстрого просмотра карточки товара, который призван избавить пользователя от перехода на полноценную страницу. Но с возникает ним уйма проблем.

Avoid PDF for On-Screen Reading

Jakob Nielsen и Anna Kaley из Nielsen/Norman Group дают советы по представлению PDF на сайтах. Они советуют избегать чтения информации на сайте из таких документов, оставлять их только на случай печати или пересылки.

Aarron Walter Designing for Emotion

Вышло второе издание книги. Добавлены главы о приватности, инклюзивности и безопасности.

Emojis in Email Subject Lines Advantage or Impediment?

Kim Flaherty из Nielsen/Norman Group рассказывает о UX-исследовании того, насколько эмоджи в названии писем рассылки привлекают пользователей. Такие вещи лучше проверять A/B-тестированием, но заметки полезные.

Inspired Design Decisions With Giovanni Pintori Publicity Becomes An Art Form

Andy Clarke продолжает серию экспериментов с интересной журнальной вёрсткой в вебе. В десятом выпуске разбирает работы Giovanni Pintori.

Как мы проводили accessibility-тестирование в Alfa Digital

Мария Симонова рассказывает о поддержке accessibility в мобильном приложении Альфа-Банка для iOS.

5 Credit Card Form Implementations That Make L.L. Bean Best-in-Class

Rebecca Hugo из Baymard Institute разбирает хорошие и плохие примеры формы оплаты пластиковой картой в интернет-магазинах.

Дизайн-системы и гайдлайны

How to understand your Design Systems health, and eventually, its success

Наикрутейшая статья Christos Kastritis про запуск дизайн-системы Deliveroo. Стратсессия для старта работ, набор индикаторов здоровья, расчёт ROI по разным срезам (шаблон).

Тёмная тема оформления

Supporting Dark Mode in Your Website

Инструкция по внедрению тёмной темы оформления на личном сайте от Jecelyn Yeen.

Телеканал Пятница

Телеканал Пятница сделал тёмную тему для ночного эфира. После 23:00 яркие и громкие проморолики заменит тихая, спокойная айдентика со сказками и стихотворениями.

Ростелеком Ключ

Дизайнеры Redmadrobot рассказывают о создании тёмной темы оформления для приложения Ростелеком Ключ. Правда, только дизайнерская часть, без дизайн-системы в коде.

WWDC 2020

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

iOS 14

Виджеты на главном экране. Теперь, как и на Android, его легко замусорить. Давний закон гласит: 95% пользователей не настраивают интерфейс (и редко меняют предустановленные производителями устройств настройки). Гайдлайны и шаблон для Figma (ещё один).

Siri не перекрывает экран, а показывает фирменный абстрактный знак внизу и плашку с результатом вверху.

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

Наглядная информация о собираемых приложением данных
(примерно как пищевая ценность продукта).

Открытие машины с телефона, которое постепенно поддержат крупные автопроизводители.

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

Экран умного дома лучше показывает текущий статус устройств.
Лучшие приложения для iOS 2020 года по версии Apple.

Видео презентаций о дизайне:

iPadOS 14

Постоянная боковая панель навигации, что ещё ближе к десктопным приложениям.

Универсальный поиск в духе spotlight.

Распознавание рукописного текста и фигур.

watchOS 7

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

macOS Big Sur

Обновление интерфейса, делающее его ещё немного визуально ближе к iOS.

И ещё на шаг назад к скеоморфизму иконки приложений теперь с мусорными тенями и детализацией.

И ещё на шаг назад к скеоморфизму иконки приложений теперь с мусорными тенями и детализацией.
Ой, не тот скриншот:

Первые макеты иконки сообщений в Figma и Sketch уже появились. Как и другие прорывные элементы дизайна (например, моднейшая для 2001 года иконка уведомлений):

Или эта восхитительная батарейка из Windows XP:

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

Бета-версии уже можно поставить, а финальные выйдут, как обычно, в сентябре. Это чутка поинтереснее и полезнее Android 11, который запинали под ковёр.

Android 11

В этом году традиционная Google I/O сначала перешла в онлайн-формат, а потом и вовсе отложилась из-за протестов. Поэтому бета-версия Android 11 появилась относительно тихо.

Больших прорывов нет, но много разной оптимизации:

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

Новая панель управления умным домом позволяет видеть всё на одном экране.

Доработали и упростили доступ к скриншотам как и многое другое, оно теперь как в iOS.

В режиме многозадачности теперь тоже можно сделать скриншот.

Управление голосом через Voice Access творит настоящие чудеса можно просто называть элемент на экране.

One thing I left out of my Android 11 beta hands on was the improved Voice Access, which now understand screen context and content. That was a mistake - it's actually incredible.

You don't have to use a grid or button numbers, you can just say what's on the screen. Watch: pic.twitter.com/wXidxZGVjt
Dieter Bohn (@backlon) June 10, 2020

Сторонним приложениям ещё сильнее ограничили доступ к телефону многие вещи можно разрешить только при его использовании.

Обзоры от Engadget и The Verge.

Google опубликовали несколько видео к этому тихушному запуску:

Финальная версия появится осенью. Уже можно поставить бету.

Quick Tips for High Contrast Mode

Sarah Higley подсказывает, как работать с высококонтрастным режимом Windows, который сильно упрощает дизайн сайтов.

How Salesforce Accelerates Design Productivity and Collaboration

Команда дизайн-системы Salesforce Lightning выпустила плагин для Sketch со всеми компонентами.

Storybook Composition

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

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

3 Persona Types Lightweight, Qualitative, and Statistical

Page Laubheimer из Nielsen/Norman Group описывает особенности создания трёх типов персонажей: экспертный путь, качественные исследования, количественный опрос. Плюсы, минусы и подводные камни каждого.

Информационная архитектура, концептуальное проектирование, контент-стратегия

Approaches to Journey Mapping 2 Critical Decisions To Make Before You Begin

Kate Kaplan из Nielsen/Norman Group описывает два пути создания CJM: экспертная версия и основанная на исследованиях, текущее и будущее состояние. Самый разумный путь сначала сделать экспертную версию текущего состояния, потом валидировать её с пользователями и создать видение будущего.

Customer Journey Map: Делимобиль

Станислав Хрусталёв из Hard Client собрал CJM для каршеринга Делимобиль.

Новые инструменты дизайна интерфейсов

Figma: Статьи

Anne-Sophie Delafosse из Deliveroo рассказывает о плагине для локализации макетов. Он позволяет проверить, не развалится ли интерфейс.
Инструкция по созданию плагина от Varun Vachhar на примере генератора конфетти.

Шаблоны

Дополнения для Google Apps.

Adobe XD

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

UXPin

Некий холдинг Xenon Partners купил инструмент. Они скупают разные облачные сервисы.

Sketch 67

Ускорение работы и оптимизация интерфейса.

Color Copy Paste

Сервис позволяет определить цвет через камеру телефона и вставить его в Figma или Sketch.

Seamless Pattern Maker

Генератор повторяющейся текстуры на фоне из пиктограмм.

Protopie 5

Таймлайны для событий, рецепты анимаций, библиотеки (включая iOS и Material Design).

Shape Divider App

Генератор фигурных разделителей между блоками на промо-сайтах.

Blobs

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

CreateStudio

Новый инструмент для анимации и motion-дизайна с фокусом на видео-ролики. Много шаблонов и готовых ресурсов.

Pose Animator

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

ShadeSketch

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

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

Как правильно интегрировать исследования пользователей и рынка в вашу продуктовую команду

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

Sensemaking & structure: how Airtable changed my practice

Rachel Miles рассказывает, как использует Airtable для хранения находок из пользовательских исследований. Она базируется на старой инструкции от самого сервиса.

UX Research Tools & Methods

Каталог инструментов для удалённых пользовательских исследований от сервиса Ethnio.

Rating Scales in UX Research Likert or Semantic Differential?

Maria Rosala из Nielsen/Norman Group описывает разницу между шкалой Лайкерта и семантическим дифференциалом. Это два популярных вида вопросов с градацией ответов в пользовательских исследованиях.

How to Convert Between Five- and Seven-Point Scales

Jeff Sauro и Jim Lewis показывают, как конвертировать значения шкалы опросов в разных измерениях: 5 и 7 вариантов ответа.

How To Test A Design Concept For Effectiveness

Беглый обзор методов тестирования дизайн-концептов от Paul Boag.

12 Ways To Improve User Interview Questions

Советы Славы Шестопалова из ELEKS по грамотным вопросам на интервью с пользователями в ходе исследований.

A Cheatsheet for User Interview and Follow Ups Questions

Структурированная памятка по вопросам при проведении интервью с пользователями от Stphanie Walter.

Кейс ВкусВилла Продуктовый ритейл в эпоху корона-кризиса

Агентство UXSSR провело UX-исследование для магазинов Вкусвилл. Они изучили изменение поведения покупателей в период карантина.

Sample Size Recommendations for Benchmark Studies

Jeff Sauro и Jim Lewis рассчитали размеры выборки респондентов для проведения сравнительных UX-исследований.

Визуальное программирование и дизайн в браузере

Kinetic Typography with Three.js

Кинетическая типографика в браузере на JavaScript.

Новые скрипты

Метрики и ROI

Leading Vs. Lagging Measures in UX

Jeff Sauro и Jim Lewis описывают взаимосвязь опережающих и запаздывающих метрик. Как предсказать результат работы продукта и его интерфейса на ранней стадии.

Дизайн-менеджмент и DesignOps

DesignOps Maturity Low in Most Organizations

Kate Kaplan из Nielsen/Norman Group провела опрос 557 специалистов по интерфейсам и разложила их по своей модели зрелости DesignOps. Какие методы и практики они используют по трём срезам: взаимодействие людей, результат работы и её влияние на бизнес.

User-Centered Intranet Redesign Set Up for Success in 11 Steps

Kara Pernice из Nielsen/Norman Group описывает стратегию редизайна интранета. Как собрать команду, определить цели, спроектировать и планомерно запустить новую версию.

Chris Avore и Russ Unger Liftoff! Practical Design Leadership to Elevate Your Team, Your Organization, and You

Открыт предзаказ на книгу. Она посвящена базовым практикам дизайн-менеджмента по управлению командой и выйдет 20 июля.

Introducing Spotifys New Design Principles

Дизайн-команда Spotify рассказывает о переработанных принципах дизайна. Есть немного деталей их создания.

DesignOps An IBM Point of View

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

Командное взаимодействие

7 tips for an effective UX demo

Jos Torre из Shopify даёт советы по демонстрации дизайна коллегам для сбора обратной связи.

Управление продуктами и аналитика

From Gut to Plan The Thoughtful Execution Framework

Annina Koskinen из Spotify рассказывает о дереве принятия решений при развитии продукта. Этот подход идёт от общей цели бизнеса к возможностям для роста и конкретным гипотезам. Это позволяет последовательно перебрать пространство проблем и решений. Шаблон в Figma.

Кейсы

Как Redmadrobot и Открытие за год запустили мобильный банк для бизнеса

Дизайн-команда Redmadrobot рассказывает о работе над мобильным приложением для предпринимателей банка Открытие.

Брендинг цифровых продуктов

Shaping an icon

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

Тренды

2020 Logo Trend Report

Обзор трендов в логотипах от Logo Lounge.

4 Design Trends That Will Define 2020

Тренды от Adobe Stock. Какие восходящие графические приёмы видны в их коллекции.


апрель падение продаж смартфонов в России	июнь рост продаж смартфонов в России

Алгоритмический дизайн: кривая хайпа

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

Einstein Designer AI-Powered, Personalized Design at Scale

Snke Rohde из Salesforce рассказывает об алгоритмическом дизайне с помощью их движка Einstein Designer. Он персонализирует блоки интерфейса на базе истории пользователя и его предпочтений например, карточка товара в интернет-магазине может делать акцент на разной информации. Видео с кратким рассказом.

Timecraft Painting Many Pasts: Synthesizing Time Lapse Videos of Paintings

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

Голосовые интерфейсы

Design patterns in voice interfaces

Jess Martn предлагает свой подход к паттернам голосовых интерфейсов: повествовательные, лингвистические и звуковые.

Люди и компании в отрасли

Iconic design firm Astro joins a $600 million global consultation firm

Британский консалтинг PA Consulting купил известное агентство по пром.дизайну Astro Studios.

Societe Generale Design

Блог дизайн-команды Societe Generale.

Материалы конференций

24 Hours of UX

Онлайн-конференция по дизайну, которая шла 24 часа всё это время выступал спикер из определённого часового пояса. Материалов нет, но формат крайне интересный.

Подпишитесь на дайджест в Facebook, ВКонтакте, Телеграме, на vc.ru или по почте там свежие ссылки появляются каждую неделю. Спасибо всем, кто делится ссылками в группе, особенно Геннадию Драгуну, Павлу Скрипкину, Дмитрию Подлужному, Антону Артемову, Денису Ефремову, Алексею Копылову, Тарасу Бризицкому, Евгению Соколову и Антону Олейнику. Отдельный благодарчик команде Сетки за редактор и Александру Орлову за визуальный стиль.

Подробнее..

Категории: Интерфейсы , Usability , Веб-дизайн , Дизайн мобильных приложений , Дизайн интерфейсов , Блог компании райффайзенбанк , Пользовательские интерфейсы , Продуктовый дизайн , Raiffeisendgtl

RecyclerView.ItemDecoration используем по максимуму

05.08.2020 14:08:45 |

Автор: admin

Привет, дорогой читатель Хабра. Меня зовут Олег Жило, последние 4 года я Android-разработчик в Surf. За это время я поучаствовал в разного рода крутых проектах, но и с легаси-кодом поработать довелось.

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

В наших проектах для списков используется RecyclerView. Я не буду рассказывать, как писать Adapter для RecyclerView или как правильно обновлять данные в списке. В своей статье расскажу о другом важном и часто игнорируемом компоненте RecyclerView.ItemDecoration, покажу как его применить при вёрстке списка и на что он способен.

Кроме данных в списке в RecyclerView есть ещё важные элементы декора, например, разделители ячеек, полосы прокрутки. И вот тут нам поможет RecyclerView.ItemDecoration отрисовать весь декор и не плодить лишние View в вёрстке ячеек и экрана.

ItemDecoration представляет из себя абстрактный класс с 3-мя методами:

Метод для отрисовки декора до отрисовки ViewHolder

public void onDraw(Canvas c, RecyclerView parent, State state)

Метод для отрисовки декора после отрисовки ViewHolder

public void onDrawOver(Canvas c, RecyclerView parent, State state)

Метод для выставления отступов у ViewHolder при заполнении RecyclerView

public void getItemOffsets(Rect outRect, View view, RecyclerView parent, State state)

По сигнатуре методов onDraw* видно, что для отрисовки декора используется 3 основных компонента.

Canvas для отрисовки необходимого декора
RecyclerView для доступа к параметрам самого RecyclerVIew
RecyclerView.State содержит информацию о состоянии RecyclerView

Подключение к RecyclerView

Для подключения экземпляра ItemDecoration к RecyclerView есть два метода:

public void addItemDecoration(@NonNull ItemDecoration decor)public void addItemDecoration(@NonNull ItemDecoration decor, int index)

Все подключенные экземпляры RecyclerView.ItemDecoration добавляются в один список и отрисовываются сразу все.

Также RecyclerView имеет дополнительные методы для манимуляции с ItemDecoration.
Удаление ItemDecoration по индексу

public void removeItemDecorationAt(int index)

Удаление экземпляра ItemDecoration

public void removeItemDecoration(@NonNull ItemDecoration decor)

Получить ItemDecoration по индексу

public ItemDecoration getItemDecorationAt(int index)

Получить текущее количество подключенных ItemDecoration в RecyclerView

public int getItemDecorationCount()

Перерисовать текущий список ItemDecoration

public void invalidateItemDecorations()

В SDK уже есть наследники RecyclerView.ItemDecoration, например, DeviderItemDecoration. Он позволяет отрисовать разделители для ячеек.

Работает очень просто, необходимо использовать drawable и DeviderItemDecoration отрисует его в качестве разделителя ячеек.

Создадим divider_drawable.xml:

<shape xmlns:android="http://personeltest.ru/away/schemas.android.com/apk/res/android"    android:shape="rectangle">    <size android:height="1dp" />    <solid android:color="@color/gray_A700" /></shape>

И подключим DividerItemDeoration к RecyclerView:

val dividerItemDecoration = DividerItemDecoration(this, RecyclerView.VERTICAL)dividerItemDecoration.setDrawable(resources.getDrawable(R.drawable.divider_drawable))recycler_view.addItemDecoration(dividerItemDecoration)

Получим:

Идеально подходит для простых случаев.

Под капотом DeviderItemDecoration всё элементарно:

final int childCount = parent.getChildCount();for (int i = 0; i < childCount; i++) {     final View child = parent.getChildAt(i);     parent.getDecoratedBoundsWithMargins(child, mBounds);     final int bottom = mBounds.bottom + Math.round(child.getTranslationY());     final int top = bottom - mDivider.getIntrinsicHeight();     mDivider.setBounds(left, top, right, bottom);     mDivider.draw(canvas);}

На каждый вызов onDraw(...) циклом проходим по всем текущим View в RecyclerView и отрисовываем переданный drawable.

Но экран может содержать и более сложные элементы вёрстки, чем список одинаковых элементов. На экране могут присутствовать:

а. Несколько видов ячеек;
b. Несколько видов дивайдеров;
c. Ячейки могут иметь закругленные края;
d. Ячейки могут иметь разный отступ по вертикали и горизонтали в зависимости от каких-то условий;
e. Всё вышеперечисленное сразу.

Давайте рассмотрим пункт e. Поставим себе сложную задачу и рассмотрим её решение.

Задача:

На экране есть 3 вида уникальных ячеек, назовём их a, b и с.
Все ячейки имеют отступ в 16dp по горизонтали.
Ячейка b имеет ещё отступ в 8dp по вертикали.
Ячейка a имеет закруглённые края сверху, если это первая ячейка в группе и снизу, если это последняя ячейка в группе.
Между ячейками с отрисовываются дивайдеры, НО после последней ячейки в группе дивайдера быть не должно.
На фоне ячейки c рисуется картинка с эффектом параллакса.

Должно в итоге получиться так:

Рассмотрим варианты решения:

Заполнение списка ячейками разного типа.

Можно написать свой Adapter, а можно использовать любимую библиотеку.
Я буду использовать EasyAdapter.

Выставление отступов ячейкам.

Тут есть три способа:

Проставить paddingStart и paddingEnd для RecyclerView.
Данное решение не подойдёт, если не у всех ячеек отступ одинаковый.
Проставить layout_marginStart и layout_marginEnd у ячейки.
Придётся всем ячейкам в списке проставлять одни и те же отступы.
Написать реализацию ItemDecoration и переопределить метод getItemOffsets.
Уже лучше, решение получится более универсальное и переиспользуемое.

Закругление углов у групп ячеек.

Решение кажется очевидным: хочется сразу добавить какой-нибудь enum {Start, Middle, End } и проставлять его ячейке вместе с данными. Но сразу всплывают минусы:

Модель данных в списке усложняется.
Для таких манипуляций придётся заранее просчитывать какой enum проставлять каждой ячейке.
После удаления/добавления элемента в список придётся это пересчитывать заново.
ItemDecoration. Понять какая это ячейка в группе и правильно отрисовать фон можно в методе onDraw* ItemDecorationa.

Рисование дивайдеров.

Рисование дивайдеров внутри ячейки плохая практика, так как в итоге получится усложненная вёрстка, на сложных экранах начнутся проблемы с динамическим показом дивайдеров. И поэтому ItemDecoration снова выигрывает. Готовый DeviderItemDecoration из sdk нам не подойдёт, так как отрисовывает дивайдеры после каждой ячейки, и это никак не решается из коробки. Надо писать свою реализацию.

Паралакс на фоне ячейки.

На ум может прийти идея проставить RecyclerView OnScrollListener и использовать какую-нибудь кастомную View для отрисовки картинки. Но и здесь нас снова выручит ItemDecoration, так как он имеет доступ к Canvas Recyclerа и ко всем нужным параметрам.

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

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

Каких целей хотелось добиться:

Писать как можно меньше наследников ItemDecoration.
Отделить логику отрисовки на Canvas и выставления отступов.
Иметь преимущества работы с методами onDraw и onDrawOver.
Сделать более гибкие в настройке декораторы (например, отрисовка дивайдеров по условию, а не всех ячеек).
Сделать решение без привязки к Дивайдерам, ведь ItemDecoration способен на большее, чем рисование горизонтальных и вертикальных линий.
Этим можно легко пользоваться, смотря на сэмпл проект.

В итоге у нас получилась библиотека RecyclerView decorator.

Библиотека имеет простой Builder интерфейс, отдельные интерфейсы для работы с Canvas и отступами, также возможность работать с методами onDraw и onDrawOver. Реализация ItemDecoration всего одна.

Давайте вернёмся к нашей задаче и посмотрим, как её решить с помощью библиотеки.
Builder нашего декоратора выглядит просто:

Decorator.Builder()            .underlay()            ...            .overlay()            ...            .offset()            ...            .build()

.underlay(...) нужен для отрисовки под ViewHolder.
.overlay(...) нужен для отрисовки над ViewHolder.
.offset(...) используется для выставления отступа ViewHolder.

Для отрисовки декора и выставления отступов используется 3 интерфейса.

RecyclerViewDecor отрисовывает декор на RecyclerView.
ViewHolderDecor отрисовывает декор на RecyclerView, но даёт доступ к ViewHolder.
OffsetDecor используется для выставления отступов.

Но это не всё. ViewHolderDecor и OffsetDecor можно привязать к конкретному ViewHolder с помощью viewType, что позволяет комбинировать несколько видов декоров на одном списке и даже ячейке. Если viewType не передавать, то ViewHolderDecor и OffsetDecor будут применяться ко всем ViewHolder в RecyclerView. RecyclerViewDecor такой возможности не имеет, так как рассчитан на работу с RecyclerView в общем, а не с ViewHolderами. Плюс один и тот же экземпляр ViewHolderDecor/RecyclerViewDecor можно передавать как в overlay(...) так underlay(...).

Приступим к написанию кода

В библиотеке EasyAdapter для создания ViewHolder используются ItemControllerы. Если коротко, они отвечают за создание и идентификацию ViewHolder. Для нашего примера хватит одного контроллера, который может отображать разные ViewHolder. Главное, чтобы viewType был уникальный для каждой вёрстки ячейки. Выглядит это следующим образом:

private val shortCardController = Controller(R.layout.item_controller_short_card)private val longCardController = Controller(R.layout.item_controller_long_card)private val spaceController = Controller(R.layout.item_controller_space)

Для выставления отступов нам нужен наследник OffsetDecor:

class SimpleOffsetDrawer(    private val left: Int = 0,    private val top: Int = 0,    private val right: Int = 0,    private val bottom: Int = 0) : Decorator.OffsetDecor {    constructor(offset: Int) : this(offset, offset, offset, offset)    override fun getItemOffsets(        outRect: Rect,        view: View,        recyclerView: RecyclerView,        state: RecyclerView.State    ) {        outRect.set(left, top, right, bottom)    }}

Для отрисовки закруглённых углов у ViewHolder нужен наследник ViewHolderDecor. Тут нам понадобится OutlineProvider, чтобы press-state тоже обрезался по краям.

class RoundDecor(    private val cornerRadius: Float,    private val roundPolitic: RoundPolitic = RoundPolitic.Every(RoundMode.ALL)) : Decorator.ViewHolderDecor {    override fun draw(        canvas: Canvas,        view: View,        recyclerView: RecyclerView,        state: RecyclerView.State    ) {        val viewHolder = recyclerView.getChildViewHolder(view)        val nextViewHolder =            recyclerView.findViewHolderForAdapterPosition(viewHolder.adapterPosition + 1)        val previousChildViewHolder =            recyclerView.findViewHolderForAdapterPosition(viewHolder.adapterPosition - 1)        if (cornerRadius.compareTo(0f) != 0) {            val roundMode = getRoundMode(previousChildViewHolder, viewHolder, nextViewHolder)            val outlineProvider = view.outlineProvider            if (outlineProvider is RoundOutlineProvider) {                outlineProvider.roundMode = roundMode                view.invalidateOutline()            } else {                view.outlineProvider = RoundOutlineProvider(cornerRadius, roundMode)                view.clipToOutline = true            }        }    }}

Для рисования дивайдеров напишем ещё одного наследника ViewHolderDecor:

class LinearDividerDrawer(private val gap: Gap) : Decorator.ViewHolderDecor {    private val dividerPaint = Paint(Paint.ANTI_ALIAS_FLAG)    private val alpha = dividerPaint.alpha    init {        dividerPaint.color = gap.color        dividerPaint.strokeWidth = gap.height.toFloat()    }    override fun draw(        canvas: Canvas,        view: View,        recyclerView: RecyclerView,        state: RecyclerView.State    ) {        val viewHolder = recyclerView.getChildViewHolder(view)        val nextViewHolder = recyclerView.findViewHolderForAdapterPosition(viewHolder.adapterPosition + 1)        val startX = recyclerView.paddingLeft + gap.paddingStart        val startY = view.bottom + view.translationY        val stopX = recyclerView.width - recyclerView.paddingRight - gap.paddingEnd        val stopY = startY        dividerPaint.alpha = (view.alpha * alpha).toInt()        val areSameHolders =            viewHolder.itemViewType == nextViewHolder?.itemViewType ?: UNDEFINE_VIEW_HOLDER        val drawMiddleDivider = Rules.checkMiddleRule(gap.rule) && areSameHolders        val drawEndDivider = Rules.checkEndRule(gap.rule) && areSameHolders.not()        if (drawMiddleDivider) {            canvas.drawLine(startX.toFloat(), startY, stopX.toFloat(), stopY, dividerPaint)        } else if (drawEndDivider) {            canvas.drawLine(startX.toFloat(), startY, stopX.toFloat(), stopY, dividerPaint)        }    }}

Для настройки нашего дивадера будем использовать класс Gap.kt:

class Gap(    @ColorInt val color: Int = Color.TRANSPARENT,    val height: Int = 0,    val paddingStart: Int = 0,    val paddingEnd: Int = 0,    @DividerRule val rule: Int = MIDDLE or END)

Он поможет настроить цвет, высоту, горизонтальные отступы и правила отрисовки дивайдера

Остался последний наследник ViewHolderDecor. Для рисования картинки эффектом параллакса.

class ParallaxDecor(    context: Context,    @DrawableRes resId: Int) : Decorator.ViewHolderDecor {    private val image: Bitmap? = AppCompatResources.getDrawable(context, resId)?.toBitmap()    override fun draw(        canvas: Canvas,        view: View,        recyclerView: RecyclerView,        state: RecyclerView.State    ) {        val offset = view.top / 3        image?.let { btm ->            canvas.drawBitmap(                btm,                Rect(0, offset, btm.width, view.height + offset),                Rect(view.left, view.top, view.right, view.bottom),                null            )        }    }}

Соберём теперь всё вместе.

private val decorator by lazy {        Decorator.Builder()            .underlay(longCardController.viewType() to roundDecor)            .underlay(spaceController.viewType() to paralaxDecor)            .overlay(shortCardController.viewType() to dividerDrawer2Dp)            .offset(longCardController.viewType() to horizontalOffsetDecor)            .offset(shortCardController.viewType() to horizontalOffsetDecor)            .offset(spaceController.viewType() to horizontalAndVerticalOffsetDecor)            .build()    }

Инициализируем RecyclerView, добавим ему наш декоратор и контроллеры:

private fun init() {        with(recycler_view) {            layoutManager = LinearLayoutManager(this@LinearDecoratorActivityView)            adapter = easyAdapter            addItemDecoration(decorator)            setPadding(0, 16.px, 0, 16.px)        }        ItemList.create()            .apply {                repeat(3) {                    add(longCardController)                }                add(spaceController)                repeat(5) {                    add(shortCardController)                }            }            .also(easyAdapter::setItems)    }

На этом всё. Декор нашего списка готов.

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

Посмотрим как ещё можно применить декораторы.

PageIndicator для горизонтального RecyclerView


CarouselDecoratorActivityView.kt

Bubble сообщения в чате и scroll bar:


ChatActivityView.kt

Более сложный кейс отрисовка фигур, иконок, изменение темы без перезагрузки экрана:


TimeLineActivity.kt

Исходный код с примерами

Заключение

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

Всем большое спасибо за внимание, буду рад вашим комментариям.

Подробнее..

Категории: Интерфейсы , Разработка мобильных приложений , Разработка под android , Дизайн мобильных приложений , Дизайн интерфейсов , Мобильная разработка , Блог компании surf , Surf , Android development , Recyclerview , Itemdecoration

Recovery mode Дизайн без исследований несколько антикейсов и выводы из них

28.08.2020 14:05:29 |

Автор: admin

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

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

Небольшой дисклеймер

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

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

Что понимаю под исследованием аудитории

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

Примеры количественных методов:

Анализ данных систем веб- и мобильной аналитики.
Онлайн- и офлайн-опросы пользователей продукта или респондентов в панели.
Карточная сортировка.

Примеры качественных методов:

Глубинное интервью пользователей.
Модерируемое или не модерируемое юзабилити-тестирование респондентов.
Дневниковые исследования.

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

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

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

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

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

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

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

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

Ненужная функциональность

Антикейс 1 возможность сравнения товаров в одной категории и расширенные фильтры для интернет-магазина

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

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

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

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

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

Как можно было поступить лучше

Команда могла узнать отношение пользователей к изменениям на этапе принятия решения о разработке. Это мог быть тот же онлайн-опрос на сайте. Он бы дал понимание опыта предыдущих покупок и потребностей пользователей в новой функциональности.

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

Антикейс 2 мобильное приложение для банковских клиентов

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

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

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

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

Можно ли было предусмотреть такой результат да. 5% клиентов компании давали 95% дохода. Причём эти клиенты никогда сами не проводили операции и взаимодействовали только со своими менеджерами на стороне компании. Всю отчётность для них привозили менеджеры и показывали её в распечатанном виде. Логично, что при такой модели новое приложение никак не затронуло основных, приносящих деньги клиентов. И тем более не привлекло бы таких же новых клиентов.

Как можно было поступить лучше

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

Перед тем, как разрабатывать приложение, компании нужно было проанализировать структуру прихода средств по типам клиентов.

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

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

Неудобная функциональность

Антикейс 1 неудачная структура лендинга

Представим себе лендинг конференции. Структура лендинга сверху вниз:

большой баннер с логотипом, названием и датами проведения;
топ-10 спикеров с фото (известные всем кто в теме);
баннер;
ещё 30 спикеров с фото;
форма заявки на покупку билета;
полная программа мероприятия;
карта проезда;
форма заявки на покупку билета;
логотипы партнёров.

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

Работу над проектом разделили на две части. Одна команда занималась анализом трафика на сайт, а вторая анализом самого интерфейса. Посмотрели на данные в Яндекс.Метрике, которые вызвали сомнения в эффективности структуры страницы, в глаза бросилась карта скроллинга.

Дальше решили провести A/B/N-тестирование, при котором на странице меняли местами форму заявки с другими блоками контента. Почему начали с формы? На лендинге была простая навигация, она не вызывала сложностей. Самих спикеров и их темы менять уже было поздно. Из возможных вариантов оставалась только сама структура страницы и расположение формы заявки.

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

большой баннер с логотипом, названием и датами проведения;
топ-10 спикеров с фото;
форма заявки на покупку билета;
всё остальное.

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

Как можно было поступить лучше

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

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

Антикейс 2 калькулятор для расчёта размера страховки

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

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

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

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

Мы провели A/B-тестирование и после анализа запросов пользователей в техподдержку добавили для сложных полей подсказки. В результате за счёт кропотливой проработки текстов подсказок удалось увеличить конверсию на 10%.

В этом кейсе комплексного исследования не требовалось. Команде дизайнеров было сразу понятно, что сложные пункты нужно подробно объяснить. Поэтому проводили A/B-тесты, чтобы понять, как лучше описать подсказки.

Как можно было поступить лучше

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

Резюмируем

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

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

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

Подробнее..

Категории: Интерфейсы , Дизайн , Дизайн интерфейсов , Блог компании нетология , Нетология , Проектирование интерфейсов , Исследования пользователей

Люди без лиц в продуктах Лаборатории Касперского

25.09.2020 14:16:06 |

Автор: admin

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

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

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

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

В то же время мы опасались, что люди без лиц покажутся недружелюбными и даже пугающими. И небезосновательно: примерно в одно время с нами исследованием проблемы занялся Константин Ефимов (см. Люди без лиц: образ Слендермена в современной рекламе), и его исследование подтвердило, что картинки без лиц оцениваются как закрытые, непривлекательные, чужие, далекие.

Но вариант с лицами также не лишен недостатков. Было ощущение, что он может произвести впечатление детскости, мультяшности и несерьезности.
Итак, нам предстояло проверить три гипотезы:

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

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

Методология

Основа нашей методологии состояла в том, что участник видел только один вариант иллюстраций либо без лиц (экспериментальная группа), либо с лицами (контрольная группа).
Каждый участник по очереди оценивал 10 картинок, взятых из разных продуктов Лаборатории Касперского. Материал для тестирования выглядел так:

Каждую картинку предлагалось оценить по четырем 7-балльным шкалам:
- Мне нравится это изображение
- Дружелюбное
- Вызывает тревожность
- Картинка воспринимается по-детски и несерьезно
Для изображений, взятых из продукта Kaspersky Safe Kids, добавлялась еще одна шкала Понравится детям.
После оценки по шкалам участникам предлагалось оставить комментарий по всем иллюстрациям в целом в свободной форме.

В исследовании участвовали респонденты из семи стран РФ (на графиках RU), США (US), Великобритании (UK), Германии (DE), Китая (CH), Бразилии (BR) и Объединенных Арабских Эмиратов (ARA). Приглашались люди из четырех демографических групп: дети 813 лет (аудитория Kaspersky Safe Kids), взрослые 2355 лет с детьми, взрослые без детей, а также люди старше 55. Суммарно мы опросили 4090 человек.

Результаты

К оценкам по шкалам применялась процедура усреднения (данные распределены нормально, шкалу можно считать количественной). Для шкал Вызывает тревожность и Воспринимается по-детски и несерьезно при расчете общих средних применялась инверсия (переворот положительных и отрицательных оценок):

Общее впечатление от иллюстраций можно описать как нейтрально-положительное. Ни в одной стране оценки не ушли в отрицательную область. Везде, кроме ОАЭ, оценки картинок с лицами незначительно выше. В Бразилии оценки заметно выше средних, в Германии немного ниже. Остальные страны дают приблизительно одинаковые оценки.

Теперь посмотрим оценки по отдельным шкалам. Изображения с лицами во всех странах нравятся немного больше, чем без лиц. Сколько-нибудь заметная разница (в пользу лиц) есть только в РФ. В Германии выше доля резко-негативных оценок, чем в других странах.

В РФ, Великобритании и Германии изображения с лицами воспринимаются как более дружелюбные. В остальных странах разница незначительная.

Изображения без лиц в целом НЕ воспринимаются как тревожные. Люди с лицами везде оцениваются чуть лучше, но заметная разница есть только в Бразилии.

Никакие изображения НЕ воспринимаются как детские и несерьезные. Самыми взрослыми и серьезными оба типа картинок кажутся в Бразилии. Оценки с лицом / без лица внутри одной страны очень близки. РФ единственная страна, где есть заметная разница (в пользу картинок без лиц).

Можно довольно уверенно утверждать, что картинки с лицами кажутся более подходящими для детей. Выраженная разница есть в Китае, менее заметная в Бразилии, РФ, Великобритании и Германии. Еще сильнее эта разница выражена в ответах родителей: картинки с лицами, на их взгляд, определенно лучше подходят детям.

Возраст почти не влияет на восприятие картинок, и это правило выполняется во всех странах.

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

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

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

(В таблице показано место картинки в общем рейтинге по стране. Три первых и три последних места отмечены зеленой и красной заливкой).

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

Отсутствие у персонажей лиц упомянули 32 участника в РФ и 19 в Великобритании (10 и 6% соответственно). Почти все комментарии при этом негативные:

Изображения людей без лиц скорее вызывают тревожные чувства.
Безликие и безэмоциональные существа (отсутствуют черты лица глаза, нос, рот) из странных мультиков.
The characters with no eyes appear sinister.
I do not like these illustrations. Firstly, no face features at all, it makes the characters look creepy.

На детскость и примитивность рисунков указывали 8% в РФ (3 и 4% в Великобритании и США). Картинки с лицами чаще описывают как детские. При этом тон высказывания чаще положительный или нейтральный:

Очень удачные, привлекательные картинки дружелюбные и немного детские.
Забавно, примитивная рисовка, в общем неплохо.
Varied, some a bit childish, some more inviting than others, generally ok.
It is very educative, impressive, exposure to children and entertaining.

Изображения с лицами чаще описываются как мультяшные. Тон в основном нейтральный или положительный:

Милые анимационные картинки, которые поднимут всем настроение.
Неплохие картинки для детских тематических комиксов по использованию гаджетов.
Fun they are like little modern cartoon pictures.
Aimed at a younger audience. Cartoon like and brightly coloured.

Резюме

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

Подробнее..

Категории: Интерфейсы , Графический дизайн , Дизайн , Блог компании «лаборатория касперского» , Дизайн интерфейсов , Ux , Пользовательские интерфейсы , Продуктовый дизайн , Ux дизайн

Выводы, которые я сделал, помогая стартапу для секс-чатов повысить конверсию

30.09.2020 14:10:05 |

Автор: admin

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

Клиент, восхищенный успехом Patreon (веб-сайт, на котором авторы могут распространять свои работы по платной подписке или предоставлять дополнительный контент для своих подписчиков), хотел сделать подобную среду, где популярные инфлюенсеры из Instagram могли бы быть ближе к своим поклонникам: публиковать уникальный контент, а также общаться в личке за вознаграждение. Однако после запуска мобильного PWA-приложения и привлечения первых пользователей, они столкнулись со слабыми вовлечением и конверсией платных действий.

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

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

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

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

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

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

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

Прежде чем начать разработку MVP, важно определить, какую конкретную проблему решает продукт и есть ли вообще эта проблема на самом деле.

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

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

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

Вот, что мы сделали:

Удалили избыточный функционал

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

Сместили акценты в профиле инфлюенсера

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

Повторили призыв к ключевому действию в конце ленты

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

Добавили призыв к ключевому действию при просмотре фото

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

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

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

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

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

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

Оба варианта знакомили новых пользователей с идеей проекта и транслировали ключевые ценности, но делали это по-разному. Первый наследовал стиль Instagram с перекрывающей контент плашкой. Второй симулировал чат.

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

Вывод:
Часто важность первого взаимодействия недооцениватся. Еще чаще, какие-то попытки презентовать совершаются только на главной странице, в то время как посадочной может быть любая страница (конечно, если это веб).

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

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

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

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

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

Представьте: вы попали на сервис, смотрите фото симпатичных девушек и вдруг в порыве эмоционального возбуждения готовы написать одной из них. Нажимаете кнопку Написать иошибка введите ваш имейл для завершения регистрации. Вы все еще под властью эмоций, вводите имейл с нетипичным доменом иошибка можно ввести имейл только из фиксированного списка доменов. Вы судорожно начинаете вспоминать, есть ли у вас имейл на яндексе или мейлру и удача снова вам улыбается вы вспомнили про старый почтовый ящик итеперь НУЖНО подтвердить ВАШ почтовый ЯЩИК перейдя ПО ссылке ИЗ письмаФааааааааак! кричите вы, но девушка так хороша, и вроде осталось совсем немного. Что ж, нужно подтвердить подтвердим иошибка недостаточно средств на счете. Вы пытаетесь понять как же пополнить этот чертов счет. Эмоции на пределе. Вы уже давно забыли про девушку и вообще не понимаете зачем делаете все это. Руки трясутся, глаз дергается и вы закрываете этот чертов сайт. От былого предвкушения уже не осталось и следа.

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

Вот, что мы сделали:

Изменили процесс регистрации

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

Внедрили внутреннюю валюту вместо реальных денег

Девушки флиртовали, заигрывали с поклонниками приглашая их в приватные чаты. Все это сильно напоминало игру. Но привязка к реальным деньгам для оплаты за каждое действие отрезвляла. Заплатить $0,3 за просмотр фото? Написать в приват $0,5 за сообщение?

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

Встроили пополнение счета в основные сценарии

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

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

Проектирование сценариев взаимодействия с помощью инструментов User Journey Map и User Flow позволяет избежать большинства таких проблем и обеспечить более целостный опыт взаимодействия с продуктом.

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

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

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

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

Подробнее..

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

7 вредных советов дизайнеру

28.10.2020 10:05:26 |

Автор: admin

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

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

Полина Абдула, проектировщик пользовательских интерфейсов Рексофт, автор вредных советов

1. Все-все делай в одиночку

Хорошего дизайнера отличает то, что он никого не отвлекает и может выполнить все самостоятельно. Он знает все технические аспекты проекта, бизнес-логику заказчика, все паттерны проектирования. Сам напишет все тексты, нарисует все иконки. Исследования в одиночку будут, конечно же, объективными. Не важно, насколько профессионально все будет выполнено или сколько лишних часов будет потрачено, главное, что сам!

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

2. Помни, что на работе тебя всему научат

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

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

3. Будь перфекционистом

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

P.S. Если всегда так работать, то можно много времени потратить просто на то, чтобы доводить макеты до идеального состояния. Не говоря о уже том, что такой темп работы ведет к выгоранию. Используй, например, размеры кратные 8 пикселям и просто предупреди об этом разработку. Закладывай время на возможные правки, ошибки, коммуникацию с разработчиками. Очень сложно всегда все учесть, иногда важнее показать идею команде или заказчику быстро, чтобы получить фидбек в правильном ли направлении ты движешься!

4. Правки это плохо

Если кто-то делает замечание по поводу твоих макетов воспринимай это как личное оскорбление, ведь дизайнер тут ты! Ты всегда знаешь, как лучше. Заказчик ведь совсем не разбирается в дизайне. Почему все лезут в твою работу? Ведь потом придется на собеседованиях объяснять, что заказчик настаивал на этом глупом решении.

P.S. Возможно, заказчик не сможет объяснить, что его смущает в твоей работе и предложит свой вариант, который, по твоему мнению, будет не самым удачным. Но в твоих силах попробовать его понять, найти компромисс или предложить еще один или два варианта. Хорошая защита решения тоже может быть полезна. Однако к такой защите нужно готовиться.

5. Изобретай велосипед, придумывай новые паттерны

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

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

P.S. Да, использовать хорошие паттерны это отличная идея, и пользователи чаще всего с ними будут уже знакомы. С разработчиками тоже нужно искать компромиссы, а по нестандартным решениям лучше консультироваться с ними заранее.

6. Используй конференции по дизайну для обучения

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

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

7. Прокачивай только хард скиллы

Как и в совете выше, не стоит распыляться на что-то, кроме изучения дизайна и инструментов. Если ты отлично проектируешь интерфейс, знаешь наизусть гайдлайны Android и iOS все двери тебе открыты. Дизайнеру не обязательно уметь искать общий язык с разработчиками и заказчиками. Дизайнер всегда знает, как должно быть красиво.

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

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

Подробнее..

Категории: Интерфейсы , Графический дизайн , Дизайн , Веб-дизайн , Дизайн интерфейсов , Дизайн сайтов , Советы и рекомендации , Дизайнеру , Вредные советы

Из песочницы Кейс как мы на яхте бортовой компьютер заменили

02.11.2020 00:07:43 |

Автор: admin

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

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

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

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

Примерно вот так она выглядит. Фото из интернета.

Яхта Итальянская, 2007 года постройки, оснащена многими инженерными системами жизнеобеспечения и комфорта пассажиров. Есть большая щитовая на нижней палубе с основными элементами управления и небольшой шкаф управления под рубкой. Там и там стоят контроллеры, отвечающие за автоматическое управление, которые связаны с бортовым компьютером. С точки зрения программиста, мы имеем 2 контроллера Wago с набором модулей расширения, которые собирают и обрабатывают данные со всех систем и передают их на верхний уровень скаду, которая установлена на встроенном ПК под управлением сильно урезанной Windows XP. Само собой, нет никаких исходников на программное обеспечение, даже не понятно вообще, что это за скада, скорее всего что-то самописное Итальянцами. Программы на контроллер тоже нет. Были некоторые электрические схемы на сами шкафы и обвязку, на Итальянском языке, местами они помогли. Вся проблема оказалась в том, что контроллер в основном шкафу приказал долго жить.

Слева сам контроллер, CPU, там вся логика и алгоритм. И к нему около 30 модулей расширения.

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

Самая сложная часть была подружить новую программу с существующей скадой. Скада полностью закрыта, нет даже ОРС сервера, она обменивается с контроллером по протоколу Modbus TCP/IP, и как именно она это делает не понятно. Мы использовали программу Wireshark, чтобы подслушать какие запросы и на какие адреса отправляет компьютер на контроллер, после чего симулировали ответы контроллера, чтобы узнать, как на них будет реагировать интерфейс скады. Это очень тонкая, деликатная и длительная работа, подбирать переменные, чтобы потом под них уже написать программу. Вся внешняя адресация алгоритма должна полностью совпадать со старой программой, чтобы бортовой компьютер работал точно так же, как и раньше.

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

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

К уже существующим системам яхты:

огни и подсветка,
вентиляция и кондиционирование,
водоснабжение и водоотведение,
насосы, танки с топливом и технологическими жидкостями,
генераторы, питание, батареи,

добавим новые:

освещение в каютах,
горн,
дворники,
люки.

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

Вместо компьютера мы поставили сенсорную панель Weintek MT8121XE, 12 дюймов и разрешение 1024х768. Экран резистивный, но для наших целей он подходит. Хорошая яркость и углы обзора.

Вот так выглядел интерфейс бортового компьютера. Честно скажу, мне он очень нравится, все очень конкретно и понятно, ничего лишнего, вся информация прекрасно читается. Да, немного уже устарел, но это 2007 год. Обратите внимание, интерфейс сделан в темных тонах. Мы уже очень давно в инженерных системах используем темную тему. Причина не в том, что это модно и современно, а в том, что интерфейсами пользуются в темное время суток или в слабоосвещенных помещениях. Хотя с этого года стали делать и светлые интерфейсы тоже, я напишу об этом отдельную статью и расскажу, что об этом думаю.

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

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

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

Дополнительно мы сделали светлую тему, так как днем, при свете солнца информация с темного экрана считывалась недостаточно хорошо.

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

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

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

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

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

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

Подробнее..

Категории: Интерфейсы , Автоматизация , Дизайн интерфейсов , Интерфейс , Диспетчеризация , Бортовой компьютер , Яхта

Из песочницы Ретроспектива разработки интерфейса листа персонажа

22.11.2020 14:12:21 |

Автор: admin

Близится 2021 год, а значит, минуло почти 4 года с момента, когда я присоединился к разработке Pathfinder:Kingmaker в качестве разработчика интерфейсов. За это время игра превратилась из маленького прототипа с минимальным функционалом в огромную, сложную систему. Игра пережила релиз, год активного багофикса и поддержки DLC, а также портирование на консоль. И теперь, когда разработку этого проекта можно считать завершенной, пришло время оглянуться и попробовать собрать ретроспективу того, как проектировались и создавались интерфейсы.

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

Введение

Компьютерный Pathfinder:Kingmaker является адаптацией настольной игры Pathfinder от компании Paizo, весьма популярной в англоязычном мире и чуть менее во всём остальном. И чтобы все без исключения участники разработки хорошо понимали, что они делают, в команде существовала прекрасная практика: еженедельная игра в настолку по оригинальному модулю Kingmaker.

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

Взято отсюда: http://runelords.peepersbog.org/index.html

В отличии от своих, более опытных в играх и разработке коллег, весь мой опыт настольно-ролевых игр сводился к играм в юности по обрывкам правил DnD и прохождения Baldurs Gate в момент, когда я даже не понимал, что она сделана по настольной игре. И, конечно, такой опыт является огромным минусом, когда нужно перенести настольную игру в компьютерную. Однако, сейчас я понимаю, что в тот момент недостаток обратился в достоинство, потому что это дало возможность взглянуть на интерфейс с точки зрения человека, ничего не знающего об игре. По сути задачей стало объясни самому себе, как это устроено, что, конечно, намного проще. Ведь никто так не сможет рассказать, как пользоваться чем-то, кроме как человек, только что этому научившийся. В момент, когда была поставлена задача на дизайн листа персонажа в игре, всё казалось очень просто: перенеси его в цифровой вид, убери лишнее и готово! И, конечно же, это оказалось не так. Чем глубже я погружался в устройство правил настольной игры, тем более ясным становилось, что Pathfinder это игра не по правилам, а по исключениям из правил.

Информационное проектирование

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

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

Переосмысление существующего, бумажного, в совокупности с новым, компьютерным, привело к идее разбиения экрана на три столбца. Хотя, правильней сказать, к идее протягивания уже существующей компоновки инвентаря. Левая треть экрана должна была стать сквозным информационным ядром интерфейсов персонажа и вобрать в себя основные характеристики. А ключевой частью этого блока должен был стать портрет. В отличии от других современных RPG, где основным представлением персонажа является 3D-кукла, у нас для роли отождествления игрока, как героя игры, был рисованный портрет. На это был сделан упор по нескольким причинам: 1. Это жанровое, духовное наследие Baldur's Gate. 2. Портретом можно выразить более сложные эмоции и лучше охарактеризовать героя, сделав игровой опыт глубже. Другие составляющие блока должны были отвечать на вопросы кто? и какой?: Хаотично-добрый полуорк, варвар, сильный и красивый, но глупый, бьёт молотом так-то, защита такая-то. Остальные две трети должны были раскрывать подробности о способностях и навыках и истории. Как результат информационного проектирования, все возможные блоки персонажа были сгруппированы и распределены по столбцам и страницам. Таким образом появилось логическое разбиение.

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

Отдельной темой хочется выделить визуализацию классовых прогрессий. Особенность Pathfinder тут в том, что, в отличии от многих игр схожего жанра, развитие персонажа здесь нельзя формализовать в статичную карту развития. Игрок может на любом повышении уровня выбрать себе другой класс и стать, например, магом 5-го уровня и вором 3-го и предсказать это невозможно. Кроме того, у каждого класса есть архетипы, выбор которых подменяет часть способностей и не обязательно на том же уровне. А еще часть способностей появляется в классе только после того, как игрок определиться с божеством своего персонажа или происхождением.
Для непосвященного человека описание почти любого класса выглядит как набор способностей, получаемых в случайном порядке и непонятно как связанных между собой. Так что на этапе сбора информации задача состояла в том, чтобы осознать паттерн организации классов и сформулировать идею, как упростить его представление.

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

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

Всё собранное было решено визуализировать уже на этапе сбора информации, чтобы оценить размеры и количественные характеристики.

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

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

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

Поиск разметки

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

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

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

В макетах использованы портреты из Baldurs Gate.

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

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

Здесь были эксперименты с группировкой способностей. Нужно было отделить способности, именуемые Feat, которые персонаж выбирает вне зависимости от класса от Special Abilities, которые уникальны для каждого класса. Плюс еще существовали Traits, сюжетное происхождение персонажа, которое за столом игрок выбирает для более интересного отыгрыша роли, но в нашем случае просто еще один способ повлиять на значения характеристик. А еще мы хотели показывать многие характеристики, которые, однако, были не всегда полезны применительно к отдельно взятому классу персонажа. Например, для мага не очень важно, насколько велик его Base Attack Bonus, он им не пользуется, когда бросает огненные шары. Но всё же некоторые блоки уже стали искать свою около-финальную компоновку с проверкой контента.

Поскольку это статья ретроспективная, то сейчас я могу сказать, что даже такие проверки не могут учесть всех вариантов контента, который может появиться в процессе разработки. Например, блок атаки был рассчитан только на 4 значения и не учитывал, что при некотором сочетании классов персонажа и заклинаний их может стать 6. Кроме того, на момент проектирование все участники были уверены, что вёрстка не сдвинется после артового оформления. Но это так же оказалось заблуждением. Игру сложно запланировать заранее, это живой процесс постоянного творчества, развития и изменения. А универсальные, безопасные решения, к сожалению, часто напоминают экселевскую таблицу, безликую и безэмоциональную. Таких решений хотелось иметь поменьше. Так что в итоге, на немецком языке, в случае двух оружий в руках, заголовки начинают слипаться и даже настройка адаптивной вёрстки и масштабирование шрифта с этим не справляется. А урок здесь такой: когда продукт почти закончен стоит отдалиться от него и еще раз взглянуть на уже принятые решения, они могут оказаться уже неподходящими. В дизайне тоже существует рефакторинг.

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

Финализация дизайна

В макетах использованы иконки из League of Legends.

Обсуждения у нас это всегда долгий процесс, отягощённый многочисленным столкновением мнений и интересов. Я не помню ни одного собрания, которое длилось бы менее 3-х часов. Одни полагают, что важнее предоставлять максимум механической информации, другие что важнее погружение в историю и атмосферу, а механические детали можно спрятать поглубже. Чаще всего такие дискуссии единственный эффективный способ выйти из тупика и, в результате обмена мнениями, прийти на следующую итерацию с новыми идеями. Страницы биографии персонажа и древо развития класса в целом были утверждены всеми участниками. А вот с главной страницы было решено убрать информацию о способностях, таблицу заклинаний и прочие числовые характеристики персонажей. Центром интерфейса решили сделать сюжетную составляющую игры. Для основного героя это стало Колесо мировоззрения, а для компаньонов мы придумали набор сюжетных карточек, ключевых событий этого персонажа, которые будут открываться игроку по мере прохождения. Баффы в этом случае также убирались из левой трети, но получали достаточно пространства, чтобы отображаться вместе с названием и параметром времени действия. Таким образом экран стал значительно чище, а также сместил фокус на то, что это в первую очередь ролевая игра, а уже потом механическая.

Способности переместились на отдельную страницу. Это позволило использовать не одни только иконки, но и названия самих способностей. Впоследствии это оказалось очень важно, потому что для отрисовки иконок под каждую способность нам в итоге не хватило времени и ресурсов. Кроме того, закодировать смысл каждой способности в иконку, а уж тем более расшифровывать её потом игроку, это слишком сложная задача. Но, опять же, ретроспективно должен отметить, что сильно недооценил количество способностей в блоке Special Abilities и переоценил их количество в блоке Traits. В итоге это вылилось в весьма несбалансированную компоновку этого экрана. Что мы, к счастью, имеем возможность исправить в будущей игре Pathfinder:Wrath of The Righteous.

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

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

Артовое оформление

Уже этот дизайн был собран в альфа-версии игры. Здесь стоит сделать некоторое важное отступление. В нашей команде по части UI, вопреки более частого деления на дизайнеров и программистов, используется такое профилирование разработчиков, когда проектировщик, верстальщик и программист это одно лицо, а художник другое. Это позволяет разграничить техническую и иммерсивную части интерфейса. И вот на момент окончания дизайна с нами еще не было художника. Кроме того, на тот момент мы были уверены, что интерфейсы будут тёмными, с какого-либо рода деревянно-кожаными подложками и бронзовыми кнопками. Но прошло время, и когда мы, наконец, нашли подходящего нам по духу человека и начали поиск артового решения, то оказалось, что мы вовсе не хотим кожу и дерево. Цвета наших интерфейсов инвертировались и превратились в бумажную, сказочную книгу о приключениях, вышедшую из под пера одного из героев. Но артовые элементы внесли дополнительные условия и ограничения, что в итоге привело к изменению вёрстки в разной степени и выявило некоторые проблемы, такие, например, как я описал выше про атаки. Но в целом, полагаю, что интерфейсы сильно выиграли. Таким образом общее ощущение от игры стало цельным, а интерфейс перестал быть просто вынужденной необходимостью, а стал часть игры.

Завершая рассказ про часть создания ПК-интерфейса, хочется сказать, что, к сожалению, не все дизайнерские решения в конечном итоге вошли в релиз в виду ограниченности ресурсов. Некоторые мы не считаем удачными и пересматриваем их в рамках работы над новым проектом, а многие мы, определённо, оставим. Но жизненный цикл интерфейсов Pathfinder:Kingmaker на этом не закончился. Нам предстояло портирование на консоль.

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

От релиза игры до момента, когда мы приступили к портированию игры на консоль прошло чуть меньше года. За это время нам удалось добавить много фичей, детализаций, многое доделать и во многом разочароваться. Мы получили много фидбэка от игроков и определили для себя камни, о которые не хотелось больше спотыкаться. В большей степени камни касались кода, многие вещи стали трудно поддерживаемы и местами слишком тесно переплетались с механикой. Так что подходя к консольным интерфейсам у нас уже накопился некоторый багаж знаний, но была и проблема. Для нас это стал первый опыт разработки интерфейсов под консоль. Мы внимательно разобрали похожие проекты, выделили что нам в них нравится а что нет, прочитали Technical Requirements, взяли несколько консультаций у более опытных команд и приступили к разработке.

Консольный интерфейс в отличии от ПК имеет ряд особенностей:

1. Их смотрят на телевизоре, сидя на диване. Это повлекло за собой увеличения кегля текста во всей игре.
2. По TRC необходимо иметь 5% save-зону, в которой не должен располагаться важный контент.
3. Курсор это сложное решение для консоли. Поэтому у нас больше нет тултипа, в который можно поместить описание параметров и способностей.

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

Однако, при этом возникали неразрешённые проблемы. Непонятен принцип, что и когда разрешать выделять. К примеру, если я разрешаю выделять Ability Scores на главном экране, то должен ли я разрешать выделять их же на странице Progression?

Где выводить описание выделенного элемента? Как прокручивать это описание не переходя на новый уровень вложенности? Появляются не интуитивные случаи управления. Например, если игрок выделяет левым стиком крайний правый элемент, то описание выводится слева, а прокручивается правым стиком.

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

Так что после попыток отнаследоваться от ПК-версии в качестве базового шаблона fullscreen-интерфейсов была предложена следующая структура:

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

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

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

Под перемещение между экранами листа персонажа мы определили бамперы R1-L1.
Переключение между персонажами осуществляется с помощью радиального меню группы при нажатии правого курка R2.

В результате у нас получилось разбиение интерфейса на 7 экранов.

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

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

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

Заключение

Не мне судить, хорошо ли получилось или нет. Всегда можно сделать лучше или по другому. Мы всегда рады критике и предложениям, всегда находимся в сомнении, а правильное ли мы выбираем решение?

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

Спасибо людям, принимавшим участие в работе над листом персонажа:
Михаил Ротфорт Lead UI
Василий Левинов UI Artist
Василий Болдырев Programmer
Никита Великовский Programmer
Максим Савенков Programmer
Оксана Мергер UI Programmer
Алексей Гусев QA Engineer
Александр Мишулин Creative Director
Виктор Сурков Art Director
Олег Шпильчевский Head of Owlcat Games

Автор: Павел Турчин UI Developer

Подробнее..

Категории: Интерфейсы , Графический дизайн , Разработка игр , Дизайн интерфейсов , Игры и игровые приставки , Дизайн игр , Игры , Unity3d , Ретроспектива , Интерфейс пользователя , Разработка интерфейсов , Дневники разработчиков , Owlcat games

Адаптация таблиц под мобильные устройства

15.03.2021 10:06:02 |

Автор: admin

Для кого эта статья

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

Проблема

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

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

Подопытный набор данных

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

Колонки:

Номер
Фото
ФИО
Телефон
Email
Дата
Текст описание
Статус
Действия

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

С фиксированной шириной и переносом строк
С шириной по контенту

Анонс следующей статьи О списках в интерфейсах и как их применять по феншую.

Десктоп

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

Варианты адаптации

Проблема наша талица по ширине не влезает в телефон.

Ошибочные решения

Уменьшать шрифт
Убирать колонки
Делать растровую картинку с таблицей и вставлять ее в макет

Возможные верные решения по убыванию

Каждую строку таблицы делать блоком
Горизонтальный скроллинг

Первый вариант адаптации - сделать каждую строку таблицу отдельным блоком, и вывести ее на экране телефона.

Проблема с данным методом: Удлиняется вертикальный скроллинг, данные повторяются. (частично решается добавлением фильтров для поиска)

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

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

Второй вариант - горизонтальный скролинг таблицы.

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

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

Вывод

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

Если вы заметили ошибки, или вам есть что дополнить - дайте мне знать, я обязательно это сделаю.Спасибо за внимание!

Подробнее..

Категории: Интерфейсы , Разработка мобильных приложений , Графический дизайн , Дизайн , Дизайн мобильных приложений , Дизайн интерфейсов , Дизайн сайтов , Таблица , Дизайн сайта , Дизайнеру , Таблицы , Дизайнеры , Дизайнер , Таблиц

Перевод Как эти забавные картинки незаметно захватили сферу маркетинга

15.06.2021 12:07:46 |

Автор: admin

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

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

Такой стиль иллюстраций называется корпоративный мемфис.

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

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

Как так получилось? И какое значение этот стиль имеет в сфере маркетинга?

Давайте разберемся.

Откуда название корпоративный мемфис?

Название кажется странным, но если разобраться в происхождении, то всё становится на свои места.

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

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

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

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

В итоге теперь уже сложно различить компании по визуальному стилю взгляните сами.

Да, эти иллюстрации с разных сайтов: скриншоты из Slack, Markup и Google Покупок.

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

1. Смерть скевоморфизма

Помните старые 3D-иллюстрации на айфонах? Это скевоморфизм дизайнерский стиль, при котором изображение элементов интерфейса имитирует реальные аналоги.

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

Так что покойся с миром, скевоморфизм.

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

Корпоративный мемфис недостающий элемент мозаики плоского фирменного стиля.

2. Взаимозаменяемые цвета

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

Скриншот YouTube

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

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

3. Простой, масштабируемый дизайн

Еще один фактор популярности корпоративного мемфиса простота создания иллюстраций в этом стиле.

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

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

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

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

Например, Canva одна из множества платформ, предлагающих готовые элементы оформления. Среди других ресурсов FreePik, UnDraw, векторная библиотека Adobe, Humaaans и т. д.

4. Радость на лице радость в жизни?

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

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

И это работает.

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

И что, это всё? Это и есть Корпоративный мемфис? Просто яркие цвета, культурное разнообразие и радостное настроение?

Внешность может быть обманчива

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

Ненастоящее этнокультурное разнообразие

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

Простота для ленивых

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

Бездумное счастье

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

Заключение

Корпоративный мемфис это палка о двух концах.

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

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

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

И если увидите маркетинговые материалы в стиле корпоративного мемфиса (что неизбежно), остановитесь на мгновение, задумайтесь, присмотритесь и оцените, достаточно ли правдиво эти иллюстрации воплощают компанию?

О переводчике

Alconost занимаетсялокализацией игр,приложений и сайтовна 70 языков. Переводчики-носители языка, лингвистическое тестирование, облачная платформа с API, непрерывная локализация, менеджеры проектов 24/7, любые форматы строковых ресурсов.

Мы также делаемрекламные и обучающие видеоролики для сайтов, продающие, имиджевые, рекламные, обучающие, тизеры, эксплейнеры, трейлеры для Google Play и App Store.

Подробнее..

Категории: Интерфейсы , Графический дизайн , Дизайн , Веб-дизайн , Дизайн интерфейсов , Блог компании alconost , Alconost , Интернет-маркетинг , Дизайн сайта , Интерфейс , Иллюстрации , Визуальный стиль

Перевод Тёмные паттерны в знакомых приложениях

25.03.2021 16:19:55 |

Автор: admin

Не путать с тёмным режимом!

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

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

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

Замаскированная реклама в YouTube

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

Автор (правообладатель): YouTube. Условия лицензии и защиты авторского права: добросовестное использование.

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

Тараканья ловушка (Spotify)

Тараканья ловушка такой дизайн, который упрощает попадание в определенную ситуацию, но затрудняет выход из нее (например, оформление подписки).

Помните, как создается аккаунт Spotify? Вряд ли: вы наверняка использовали OAuth и сразу же вошли через аккаунт Facebook. А если нет заполнили небольшую форму, указали регистрационные данные и всё. А как удалить аккаунт Spotify? Если вы пытались это проделать, наверняка помните, что пришлось постараться.

На веб-странице Spotify легко понять, как войти или зарегистрироваться. На панели навигации есть понятные кнопки и еще выделенная кнопка в центре экрана.

Автор (правообладатель): Spotify. Условия лицензии и защиты авторского права: добросовестное использование.

Если нажать кнопку входа, вы обнаружите, что для использования Spotify не нужно создавать аккаунт можно войти через аккаунт Facebook, Apple или Google. Просто и удобно, правда?

А вот удалить аккаунт Spotify то еще испытание. Нужно всего лишь выполнить следующее:

Перейти на страницу support.spotify.com/us/contact-spotify-support/.
Нажать Войти справа вверху и ввести свои учетные данные.
Нажать пункт Подписка.
Выбрать вариант Я хочу удалить аккаунт.
Нажать Удалить аккаунт.

Автор (правообладатель): Spotify. Условия лицензии и защиты авторского права: добросовестное использование.

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

Заманить и подменить (Reddit)

Заманить и подменить: вы хотите сделать одно, но вместо этого выполняете другое, нежелательное действие.

Автор (правообладатель): Reddit. Условия лицензии и защиты авторского права: добросовестное использование.

Листая ленту Reddit, можно раскрывать изображения, нажимая на них. Однако в ленте Reddit есть множество рекламных записей, и если пользователь нажимает на картинку такой записи, вместо стандартного поведения (развертывание изображения) открывается какой-нибудь рекламный веб-сайт.

Тараканья ловушка (Instagram)

Instagram использует паттерн тараканьей ловушки не так, как Spotify: Instagram мобильное приложение, но при этом удалить аккаунт из самого приложения невозможно. Пользователю понадобится браузер, что неоправданно усложняет процесс удаления аккаунта.

Выдержка из справочной документации Instagram

Принудительное продолжение (Skillshare)

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

Автор (правообладатель): Skillshare. Условия лицензии и защиты авторского права: добросовестное использование.

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

Подтверждение с укором (Wish)

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

Автор (правообладатель): Wish. Условия лицензии и защиты авторского права: добросовестное использование.

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

Предотвращение сравнения цен (AliExpress)

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

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

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

Скрытые затраты (Broadway.com)

Скрытые затраты: переходя к последнему этапу оформления заказа, вы обнаруживаете непредвиденные затраты например, плату за доставку, налоги ит.д.

На скриншоте выше показано, что при выборе мест отображается цена в 59,50доллара за каждое. Однако на этапе оформления заказа за каждый билет взимаются дополнительно 14,88доллара за обслуживание и обработку заказа, то есть цена внезапно увеличивается. Эта уловка часто используется на платформах по продаже билетов, из-за чего покупателям сложно предсказать, сколько придется потратить.

Об авторе

Мариана Варгас UX-специалист и певица из Лиссабона (Португалия). С ней можно связаться через LinkedIn.

О переводчике

Перевод статьи выполнен в Alconost.

Alconost занимается локализацией игр, приложений и сайтов на 70 языков. Переводчики-носители языка, лингвистическое тестирование, облачная платформа с API, непрерывная локализация, менеджеры проектов 24/7, любые форматы строковых ресурсов.

Мы также делаем рекламные и обучающие видеоролики для сайтов, продающие, имиджевые, рекламные, обучающие, тизеры, эксплейнеры, трейлеры для Google Play и App Store.

Подробнее..

Категории: Управление проектами , Usability , Развитие стартапа , Управление продуктом , Дизайн интерфейсов , Блог компании alconost , Alconost , Проектирование интерфейсов , Проектирование взаимодействия , Тёмные паттерны , Уловки , Дизайн продуктов , Скрытые затраты

Как мы хакнули умные подушки и запустили приложение для умной спальни Асконы

21.08.2020 18:08:22 |

Автор: admin

Привет! Меня зовут Сергей Солдатов, я директор по продукту в компании 65apps. Мы разрабатываем мобильные приложения, используем в работе продуктовый подход. Хочу поделиться с вами нашим недавним кейсом, где именно продуктовый подход помог погрузиться в непривычную предметную область и создать сервис с уникальной ценностью. Это наш совместный проект с компанией Аскона приложение для управления умной спальней.

Для начала забавный факт: перед началом работы всей проектной группе, а это: директор по продукту, арт-директор, руководитель проекта, аналитик, дизайнер, разработчики iOS, Android и QA-специалист, Аскона передала свои умные девайсы, видимо, чтобы мы лучше высыпались и продуктивнее работали. Прямиком с завода к нам в ижевский офис приехали подушки, трекеры сна, основание кровати все это было необходимо подключить. Мы действительно спали на этих подушках и это тот самый случай, когда я готов их неистово рекомендовать. Я уже не смог вернуться к своей старенькой синтепоновой, и после сдачи проекта купил всей семье умные подушки (Аскона не платит мне за рекламу, а жаль).

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

Продуктовый подход

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

Что такое Умная спальня? Это экосистема из самых разных устройств от управляемого основания кровати до умных светильников и гардин. С ее помощью можно создавать в спальне индивидуальную атмосферу, максимально подходящую для комфортного сна.

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

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

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

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

Как мы превращали идею в продукт

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

В MVP вошли три устройства:

Smart pillow умная подушка, которая отслеживает сердечный ритм и частоту дыхания человека;

Sleep-dot небольшой датчик, контролирующий уровень влажности и температуру воздуха в помещении, а также фиксирующий время засыпания человека;

основание кровати Ergomotion, которое состоит из нескольких секций с изменяемым углом наклона и умеет делать массаж.

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

На этой же встрече мы набросали примерный Customer Journey Map, но в начале работы оставалось ощущение, что он все же не закрыт, поскольку на старте многое не было видно. Сначала наша фантазия ограничивалась теми решениями, которые уже были доступны, поэтому многие крутые идеи приходили уже в процессе работы. Например, в ходе работ над MVP я увидел ту фичу, которая будет отличать наше приложение от аналогичных решений. Подключаемые устройства передают в приложение множество самых разных данных, но сама по себе их ценность не так велика для пользователя, да и разобраться в них непросто. Мы решили, что наше приложение должно давать пользователю не только скоринг, но и персонализированные советы о том, как сделать сон лучше. Эта идея прекрасно ложилась в цели Асконы и видение продукта, так что клиент подключил к работе над рекомендациями своих экспертов-сомнологов специалистов, которые занимаются профилактикой и лечением расстройств сна.

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

Еще за три спринта мы разработали аналогичный сценарий подключения слип-дота и переключение между устройствами.

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

Разработка: что делать, если нет SDK

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

У нас даже мемы свои появились: отправить команду на основание и перезагрузить подушку.

Пожалуй, сложнее всех пришлось разработчикам.

На старте работ у них не было никаких SDK к девайсам. Попытка декомпилировать родное приложение дала нам 16 тыс. строк кода с комментариями на китайском.

Здесь пригодился навык поиска на Github SDK для подушки и слип-дота ребята нашли именно там, а вот SDK для основания пришлось писать самим.

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

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

Приложения мы писали с использованием Clean architecture, нам важно было предусмотреть дальнейшее масштабирование продукта.

Редизайн в середине проекта

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

Все выглядело убедительно и заказчик согласовал макеты.

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

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

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

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

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

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

Несколько решений мы искали и за пределами работы приложения. Например, что делать, если девайс разрядился? И как помочь пользователю предотвратить такие ситуации? Наше приложение периодически запрашивает у устройств уровень заряда. Если он низкий, то в карточке устройства отображается соответствующий индикатор. Так пользователь вовремя успеет зарядить свой девайс.

Тестирование: берем работу на дом

Тестирование приложения шло непрерывно, с самого первого спринта.

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

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

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

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

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

Что дальше?

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

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

Подробнее..

Категории: Интернет вещей , Умный дом , Agile , Управление продуктом , Дизайн мобильных приложений , Будущее здесь , Дизайн интерфейсов , Управление проектами и командой , Гаджеты и девайсы , Mobile development , Продуктовая разработка , Умные устройства , Инновации в it , Здоровье и долголетие

Шесть самых необычных онлайн-площадок для коммуникации

05.08.2020 16:23:28 |

Автор: admin

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

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

1. Онлайн-бары

Этот тип площадок в период самоизоляции вырос как на дрожжах. Типичный онлайн-бар это красиво оформленная страничка, на которой запускается движок видеоконференции. Обычно там есть барная стойка и звучит фоновая музыка-радио. Подборку таких заведений можно найти на onlinebar.pro. Например, StayTheFuckHomeBar. Здесь собираются до 50 человек, видеоконференция разворачивается на сервисе Whereby. Участники встречи расшаривают экран, делятся записями в Trello и документами. Эмоции выражают в чате через смайлики.

Stay the f**k home bar легендарный круглосуточный онлайн-бар, который стал родоначальником проекта StayReal.online с живым контентом

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

2. SpatialChat

Когда в видеочате участвуют хотя бы 10 человек, одновременное общение невозможно: все сольется в какофонию булькающих звуков. Обычно все сидят замьюченные, а разговаривают 1-2 человека. Совсем не похоже на настоящую тусовку, где народ расходится по кучкам и что-то кулуарно обсуждает. Можно ли реализовать такое в онлайне? Решение этой проблемы нашлось на площадке SpatialChat.

Эту платформу разработали ребята FunCorpLab в 2019 году в качестве простого эксперимента: как перенести дух вечеринки в сеть. Потом она пылилась в репозитории до начала изоляции. Тогда разработчики задумались, как же им общаться друг с другом, и вспомнили про SpatialChat. В апреле 2020 года идею расчехлили, показали на Product Hunt и платформа взлетела: сейчас ей пользуются до 150 тысяч человек ежемесячно.

Одни смотрят видео, другие превратили санузел в переговорку

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

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

Совместный просмотр онлайн-трансляции можно оформить под виртуальный концертный зал

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

Больше всего по вкусу SpatialChat пришелся японцам, которые просто фанатеют от всевозможных Zoom-вечеринок.

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

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

3. Mootup

Что если дополнить обычные видеоконференции элементами виртуального пространства? Так решили разработчики Mootup и создали виртуальные 3D-комнаты для проведения ВКС в Zoom, Teams, Slack, Bluejeans и Webex. Причем подключаться можно как через ПК или мобильник, так и с помощью VR-гарнитуры.

Существует несколько типов виртуальных комнат: офис, коворкинг, школьный класс, конференц-зал, переговорка и выставка. Перед заходом в комнату вы создаете свой персональный аватар, примерно как в The Sims.

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

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

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

Во время видеоконференции участники расшаривают свой экран на дисплеи внутри комнаты. Доступно голосовое общение, текстовый чат и приватный текстовый чат

Бесплатный доступ ограничен количеством участников до 5, а также временем сессии до 40 минут. Платный доступ позволяет создать свой дизайн комнат и разместить в них 3D-объекты из библиотеки семплов.

На экран можно выводить видео с собственной веб-камеры. И почему бы не добавить рядом с экраном бонсай?

Плюсы площадки: 3D-пространство, подстроенное под тип мероприятия, интеграция с несколькими ВКС-платформами. Здесь проводят встречи разного формата и масштаба, хотя проблема у кого-то включен микрофон остается.

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

4. AltSpace VR

Вообще, в теме с виртуальными мирами что-то есть. И следующее интересное место площадка AltSpace VR. Оно заточено под использование VR-гарнитур, но поддерживает и 2D-режим для пользователей ПК. Чтобы запустить платформу, придется установить толстый (500 МБ) клиент через Steam.

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

Внутри ждет немного мультяшный виртуальный мир, в котором пользователи выглядят как забавные человечки. Посетители организуют мероприятия в готовых локациях либо строят свой собственный мир. Для развлечения участников можно добавить простенькие игры: дартс, шарики. Веб-страницы и свои презентации на Slides.com участники выводят на присутствующий в комнате большой экран. И да, громкость звука здесь, как и в SpatialChat, зависит от расстояния до источника звука.

Обстановка может быть не только офисной

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

5. Virbela

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

Конференции можно проводить на берегу моря

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

На экраны участники выводят свои презентации и другую информацию

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

Места для отдельных рабочих групп

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

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

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

Virbela подойдет для организации развлекательной вечеринки на пляже и для проведения форума на тысячу человек, для всего есть свои фишки. Основной недостаток платформы необходимость загрузки толстого клиента на 5001000 МБ.

6. Minecraft

А что если провести мероприятие не в каком-то специальном пространстве, а прямо в популярной игре? Недавно Вышка (НИУ ВШЭ) провела в MineCraft конференцию по играм в виртуальной копии своего кампуса, а Большой драматический театр им. Г.А. Товстоногова поставил в этой вселенной первый спектакль.

Президиум на одной из сессий

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

Зал практически битком (ограничение накладывала сама платформа)

Движок MineCraft позволяет реализовать самые смелые идеи, но в то же время такой проект трудозатратен. Разворачивать свой игровый сервер чисто для онлайн-пати или рабочих встреч станут только отъявленные активисты.

Придется попотеть и над организацией трансляций внутри игры. ВШЭ, например, для этого использовала Discord. Что интересно, ивенты начинают проводить и в других игровых вселенных. Так, недавно американский репер Трэвис Скотт устроил музыкальный концерт в игре Fortnite. Если так дальше пойдет, ждите большие конгрессы в Fallout 76 и приятельские вечеринки у костра на Кордоне в Stalker. Гитара прилагается.

Сводная таблица онлайн-площадок

Что дальше?

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

Разумеется, это не полный список платформ. Мы брали только те, которые казались нам интересными или необычными. Поэтому, например, мы пропустили тот же Mozilla hubs. А какие интересные платформы и места для онлайн-общения попадались вам? Поделитесь в комментариях, мы обязательно их посмотрим и протестируем самые необычные и полезные для организаторов мероприятий.

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

Подробнее..

Категории: Конференции , Учебный процесс в it , Дизайн интерфейсов , Видеоконференцсвязь , Блог компании leader-id , Презентации , Онлайн-образование

Как упростить слежение за вагонами. Цветовая индикация дорог для Первой грузовой компании

25.06.2020 12:16:27 |

Автор: admin

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

Поговорим осоздании цветовой схемы снепосредственным исполнителем, нашим ведущим дизайнером, Викторией Самохваловой, икоординатором проекта Марией Крюковой.

Цветовая индикация что это икак появилась задача?

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

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

М.К: Это была наша инициатива полностью переработать цветовую систему дорог. Сделать еечитаемой иподходящей под определение цветовая гамма делового портала.

Как строилась работа?

В.С: Задача была непростая. Для выстраивания системы взаимодействия цвета требовалась общая карта пересечений железнодорожных путей, чтобы понять, какие дороги скакими граничат. Аеенет. Есть или индивидуальные карты дорог, или единая, без разграничений.

Поэтому первым шагом стало формирование системы соседства. Япрописала, скакими дорогами пересекается каждая из16дорог, покоторым ходят вагоны ПГК (без ж/д заграницейРФ).

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

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

Все это выстраивалось вкаком-то специальном инструменте?

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

Потом начался перенос вцифровую среду. Впалитре подбирала аналогичный цвет исразуже выстраивала все возможные связи дорог вразном направлении.

Давайте посмотрим напримере, как работает схема. Прямоугольник вагон. Допустим, сейчас вагон находится наКуйбышевской дороге, значит, онпришел сСеверной, Московской или Восточно-Сибирской. Дальше пойдет поГорьковской, Южно-Уральской, Приволжской, Юго-Восточной или Московской. Итакую декомпозицию можно проделать скаждой дорогой изпяти столбцов. Плюс, унас есть активный цвет пройденный путь инеактивный цвет непройденный путь, в50процентов прозрачный отосновного. Эта прозрачность тоже учитывалась при выборе цвета.

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

Подробнее..

Категории: Графический дизайн , Дизайн интерфейсов , Личный кабинет

Как мы решаем проблему отсутствия UIUX дизайна в 1С с помощью Java Script и React.js

03.07.2020 02:04:06 |

Автор: admin

Ранее уже писал о том, что в 1С UI\UX дизайна нет. Эта статья про то, как мы с помощью таких технологий, как Java Script, React.js и Google Firebase решили сделать web-сервис, который позволит с наименьшими трудозатратами, в сравнении с 1С: Конфигуратором и уже тем более 1C:EDT, прорабатывать UI и UX дизайн будущего приложения на 1С, корректировать его на лету и передавать в работу программисту уже согласованный прототип будущего бизнес-приложения.

Для начала, расскажу о наболевшем при реализации проектов на 1С, причем на столько, что бросили 1С и начали развивать web-технологии, но, как ни странно, для исправления ситуации в 1С.

ЧАСТЬ 1 проблематика. Решаемые задачи.
1.Инструменты бизнес-аналитиков, руководителей проектов, менеджеров по продажам.
Не смотря на развитие технических инструментов экосистемы 1С (выше писал про 1C:EDT и т.д.), остается крайне скудным инструментарий для тех специалистов, которые находятся на передовой в проектах разработки и внедрения: бизнес-аналитиков, консультантов, руководителей проектов, именно они, одними из первых встречаются с Заказчиком, собирают требования, интерпретируют услышанное, формализуют в виде ТЗ и иных проектных документов. Более того, столько продвинутых инструментов для формирования ТЗ, прототипирования, дизайна, как у программистов, front-office не имеет. Чтобы показать Клиенту то, что его ожидает в результате проекта (программирования) консультанты рисуют формы в Paint, MS Excel и других, не далеких от удобства инструментах. До сих пор нет и единого мнения, стандарта в инструментах формализации бизнес-процессов, кто-то применяет Business Studio, кто-то Visio, сам вендор 1С: СППР и т.д., не говоря уже про стандартную нотацию (IDF0, ARIS и т.д.).

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

3.Коммуникации и сложность восприятия. Online внедрения 1С.
Классика: Заказчик говорит одно, подразумевает другое, аналитик третье, а программист четвертое. В текущих реалиях на это дополнительно накладываются карантинные ограничения очных встреч, начинаются внедрения по удаленке.

4.UI и UX дизайн, проработка интерфейсов решений на 1С.
Уже не первый год в сообществе 1С произносятся и обсуждаются такие термины, как UI, UX, сейчас мы о них поговорим, а ещё поговорим и про CX.
User Experience (UX) пользовательский опыт. Цель UX-дизайнера сделать так, чтобы пользователь быстро и легко получил от программы то, зачем он её использует.
User Interface (UI) пользовательский интерфейс. Цель UI-дизайнера создать эстетичный дизайн интерфейса продукта.
Наиболее яркий пример UI и UX в быту (это не только ИТ-ые термины :-), когда UI хорошо, а вот UX нет:

Исправляем ситуацию и подтягиваем до высокого уровня UX:

Грань между UI и UX очень тонкая и порой её сложно отличить, но она есть.
А знаете ли Вы, что UI и UX напрямую влияют на CX?
CX (customer experience) клиентский опыт. Ваш продукт это лицо Вашей компании или личного бренда (репутации). Хорошо спроектированное, продуманное программное решение с красивым дизайном повышает лояльность (NPS) клиентов к Вашему бренду и компании.
В итоге, корреляция этих трех составляющих следующая:

5.Кадровый голод.
Так было, так есть и так будет всегда и не только в ИТ индустрии. Победить эту проблему мы не сможем, но минимизировать однозначно. При этом сообщество 1С нуждается не только в программистах, как ещё говорят технарях, но и бизнес-аналитиках, РП-ах, администраторах гуманитариях. Выше я сказал, что в смежных отраслях, таких как разработка сайтов и мобильных приложений есть такие специалисты (профессии), как UI\UX (не редко их совмещают в одном лице) дизайнеры, а в 1С отрасли UI\UX дизайнер это программист. Нужно привлечь в отрасль UI и UX дизайнеров, начать их выращивать, это даст тройной эффект:
1.Высвободит время программистов, переложит часть предварительной работы на дизайнеров.
2. Повысит качество конечного продукта, через более глубокую проработку удобства и эстетики интерфейса.
3. Расширит рынок специалистов, позволит привлечь в отрасль больше гуманитариев (дизайнеров, маркетологов, переводчиков и т.д.).

Итак, коротко перечислим решаемые проблемы:
1. Отсутствие простых и удобных инструментов для бизнес-аналитиков, консультантов, руководителей проектов. Более того, каждый в своей практике встречал таких менеджеров со стороны Заказчика, которые программировать не умели, но объяснить, нарисовать, что именно хотят, более чем могли, был бы адекватный для этого инструмент.
2. Увеличение сроков проекта, бюджета, снижение лояльности в результате многократных итераций сдачи работ, вызванных порой недопониманием, которое может быть снято на ранних стадиях проекта.
3. Коммуникации и сложность восприятия, усиливающиеся удаленной работой и все большего перехода в режим online работы и внедрений проектов на 1СВнешний вид и дизайн есть доклады
4. Удобство и качество интерфейсов, ежедневно повышающиеся требования заказчиков в более глубокой проработке UI\UX дизайна решений. Конкуренция со стороны Web продуктов. Сложности в коммуникациях и понимании друг друга
5. Кадровый голод.

Часть 2 применение web-технологий для популяризации 1С-технологий 1С. Решение обозначенных проблем.
В ходе осмысления и поиска решений обозначенных проблем были сформулированы требования к будущему продукту:
1. Инструмент должен быть простым, интуитивно понятным, позволяющим начинающим бизнес-аналитикам и консультантам в кратчайшие сроки освоить механизм прототипирования решений на 1С.
2. Online, не требующий установки и лицензий 1С предприятия, доступный широкой аудитории.
3. Простота и удобство работы над UI и UX дизайном, которое позволит спроектировать оптимальный интерфейс без привлечения программиста, на этапе сбора требований.
4. Возможность совместной работы исполнителя (бизнес-аналитика) и заказчика в online режиме с целью повышения качества коммуникации и снижения негативных факторов перехода на online режим работы и взаимодействия.
5. Еще по ходу добавилось требование мультиязычного интерфейса и возможность простого, автоматического перевода интерфейс на наиболее востребованные языки.

Обзор технологий

Frontend
В основе лежит Single Page Application подход и фреймворк React.
ru.reactjs.org
Для реализации UI конструктора форм возьмем Material UI.
material-ui.com/ru
Сетка для проектирования форм и реализации колонок будет взята тоже из
Material, но потребует настройки.
material-ui.com/ru/components/grid
Примеры реализации аналогичной идеи Drag&Drop создания макета из
элементов:
github.com/chriskitson/react-drag-drop-layout-builder
github.com/kiho/react-form-builder
github.com/saravananangu/react-drag-drop-form-builde

Backend
На первом этапе достаточно использовать serverless подход и взять Google Firebase за основу.
В дальнейшем начнем разработку собственного backend-приложения на Node.js.

Архитектура:

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

2. Простой и понятный конструктор прототипирования форм 1С.

3. Возможность поделиться ссылкой даже с тему, у кого нет аккаунта.
ПРИМЕР

4. Online отображение изменений при редактировании форм: исполнитель вносит корректировки, заказчик по ссылке видит изменения online (страницу браузера обновлять не нужно).

5. Создание проектной документации (ТЗ, ТП) становится на много проще, а главное они выглядят более реалистично имеют деловой стиль и стандарт.
6. Приятной неожиданностью стало то, что web-технологии открыли новые возможности, которые не планировались, а именно автоматический online перевод текстов на любой язык.

Часть 3 заключение.
Мы надеемся, что 1CMaker позволит решить обозначенные проблемы, снизит порог вхождения в отрасль, позволит привлечь новые кадры и даже создаст новую компетенцию в 1С сообществе UI\UX дизайнер (1С: Дизайнер). Начало положено, но это только начало и мы планируем ещё много вкусного реализовать:
1. Выгрузка формы в XML формате.
2. Адаптировать интерфейс под мобильную платформу.
3. Выгрузка спроектированных форм с описанием в формате MS Word шаблон технического задания.
4. Задач на разработку и оценка трудозатрат.
5. Связи между объектами и т.д. и т.п.

Спасибо, что дочитали до конца, удачных Вам проектов и помните: Красота спасет мир (Ф.М.Достоевский)!

Подробнее..

Категории: Дизайн , Дизайн мобильных приложений , Дизайн интерфейсов , Ui/ux , Ui/ux дизайн , Прототипирование , Erp-системы , Прототипирование интерфейсов , 1с , 1с:предприятие , 1с предприятие 8 , 1с предприятие , Внедрение erp

Личный опыт обучения в Яндекс.Практикум

28.12.2020 00:15:11 |

Автор: admin

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

Синопсис

Абзац для тех, кто хочет без "лишней воды" получить реальный отзыв студента Яндекс.Практикума. Курс "Дизайнер интерфейсов". Длительность семь месяцев. До оплаты есть возможность пройти часть учебника. Оплатить можно частями или сразу. Язык изложения материала доступный для любого возраста. Даже если Вам пятьдесят Вы сможете осилить курс. И это факт, так как со мной учатся взрослые люди. В учебнике есть задания, которые необходимо выполнять, чтобы закреплять материал и понимать следующие темы. Обучение проходит спринтами. У Вас есть время для чтения учебника и выполнения заданий. Задания бывают двух типов. Мини-проекты и обычные задания. В учебнике нет возможности читать хаотично. Материал подаётся в строгой последовательности. Некоторые задания необходимо выполнять чтобы перейти к следующему параграфу. Задания со звездочкой необязательны к выполнению, но желательны. В конце каждого спринта нужно выполнить финальный проект, который имеет два дедлайна. Мягкий и жесткий дедлайн. Если Вы сдаете проект до мягкого дедлайна и получаете обратную связь от ревьювера с замечаниями к проекту, у Вас есть две итерации на исправление замечаний. Так Ваш проект становится лучше и Вы больше понимаете и усваиваете. Если Вы не успели сдать проект до мягкого дедлайна, у Вас есть жесткий дедлайн. В этом случае отправляя работу на ревью, вы имеете одну попытку на исправление. Кто не справляется с дедлайнами, оправляется в академический отпуск. Такие студенты среди нас были. Причины разные загруженность человека, семейные проблемы, здоровье и прочие. Когда Вы знаете, что кто-то не смог продолжить обучение и ушел в академ, Ваша мотивация повышается. Кроме учебника с заданиями и проектами, которые могут стать основой для Вашего портфолио, особое значение в обучении занимает обратная связь и социальная активность среди таких же как Вы. Для общения используется площадка slack.com. Для каждого потока учащихся свой куратор, преподаватели и наставники. Согласно правилам, Вы можете задавать вопросы в личных сообщениях, в специальных тематических каналах. Отвечают быстро, без задержек, согласно установленному регламенту. Здесь же проходит общение всех студентов. Весь поток поделен на группы. У каждой группы своё название. За каждой группой закреплен свой наставник и преподаватель. По общим вопросам обращаться нужно к куратору. Наставник проводит вебинары в которых предусматривается разъяснение непонятных тем. Главное, что всё проходит в режиме диалога всех участников вебинара. Это очень мотивирует. Можно общаться по видеосвязи или писать в чате. Некоторые вебинары посвящены разборам выполненных студентами работ. Есть вебинары которые ведут приглашённые дизайнеры. Если что-то непонятно в учебнике или во время выполнения проектов, нужно смело задавать вопрос преподавателю. Он в своем сообщении может объяснить тему или вступит в диалог если остался непонятный материал. Кроме общения slack используется для обмена ссылками на интересные и полезные ресурсы. В частности, UX, UI, типографика и смежные направления. Очень важным, с моей точки зрения, является самоорганизация и мотивация. Учебника достаточно для понимания предмета и формирования навыков для будущей работы. И всё-таки, эта система совершенна только при участии самого студента. Каждый человек уникален и скорость понимания и способности индивидуальны. Поэтому необходимо обращаться к внешним учебным материалам. Yandex, Google и другие поисковые системы содержат множество ссылок на полезные для ознакомления источники дизайнерской мудрости. Youtube с бесплатными уроками инструментария UX / UI дизайнера, профессиональная литература, чаты дизайнеров, где можно спросить и получить много полезной информации по профессии, просто необходимы. Курс от Яндекс.Практикум плюс личное дополнительное самообразование по профилю в совокупности дают очень и очень заметный результат.

Абзац, необязательный к прочтению

Я на протяжении двух лет следил за развитием событий в сфере онлайн-образования. Хотелось не ошибиться, сделать правильный выбор. Просмотрев хвалебно-зазывательные вебинары множества школ, решил что Яндекс.Практикум имеет больше плюсов. Во-первых, имя которое у будущих работодателей на слуху. Во-вторых, уверенность в том, что компания Яндекс нанимает лучших специалистов и методистов в сфере образования по конкретному направлению. В-третьих, сертификат от Яндекс.Практикума. Направление "Дизайнер интерфейсов" востребованное. Настоящих специалистов в этой области не много. А значит, есть возможность окончить данный курс и устроиться на работу в качестве UX/UI дизайнера. Меня лично интересуют финансовый сектор. Хотелось бы работать дизайнером интерфейсов в Альфе, в Сбере, в Тинькофф. Закончив обучение, я постараюсь написать о своих результатах. :) Интересно ведь, станет ли мечта реальностью?

Хотелось бы работать дизайнером интерфейсов в Альфе, в Сбере, в Тинькофф.

Когда я узнал про новый курс от Яндекс.Практикум, то готов был стать первым студентом. Однако по личным причинам задержался и попал только во второй набор. Я не жалею. Уверен, что судьба не зря так распорядилась. Среди второго набора много студентов находятся в ежедневном, ежечасном контакте вне образовательной площадки. Мы постоянно общаемся на темы дизайна, UX и за четыре месяца стали очень близкими друзьями. Я надеюсь мы продолжим общение и после обучения. Наше общение и обсуждение проектов из учебника, обмен решениями и критика друг друга делает что-то магическое. Будто в естественных условиях формируется команда специалистов одного профиля. :) Меня это радует и мотивирует.

Абзац про то как Яндекс.Практикум трансформировал моё сознание

Почему именно такое ощущение? Имея за плечами большой опыт в сфере графического дизайна, я сформировал личное отношение к времени, к работе, к периодам "выгорания", к застоям. В моём случае обучение в Яндекс.Практикуме совершает rebirth сознания. Я задумался над многими моментами в своей основной профессии. Переход в онлайн-среду предполагает скорый темп жизни, быть всегда в курсе трендов, уметь гасить состояние "творческой лени" ради результата. Раньше ограничения в виде спринтов с дедлайнами, принятых во многих компаниях, как режим работы, меня смешили и возмущали! Как можно делать творчество, находясь в рамках? :) Ибо любой дизайн это творчество. Но сейчас, я изменил своё мнение, я понимаю, что эти рамки нужны, они необходимы. Моя проблема личного характера, это взгляд на материал для вэба через призму мировоззрения графического дизайнера. :) Вроде монитор, экран, тот же лист бумаги, но это не так К тому же графика в моём случае это рождение статики через динамику. А работа в сфере дизайна интерфейсов предполагает динамику и только её. Причём связь каждого участка изображения, форма и место расположения активных зон экрана накладывает особую логику на процесс создания дизайна. Я это начал осознавать только благодаря учёбе. Моё незнание элементарных вещей в дизайне заполняется кирпичиками знаний из дизайна интерфейсов. А самое главное, это осознание связей блоков интерфейсного мира. Это на уровне интуиции и постоянного процесса мышления. Теперь это происходит автоматически вторым потоком. Я могу идти, ездить, есть, смотреть ТВ или делать любую другую работу, но мой поток мыслей о приложении или взаимодействии элементов экрана идет параллельно человеческой жизни.

Я очень много времени посвящаю курсу. Точнее даже не чтению и выполнению заданий, а рассуждению на пройденную тему. А затем я люблю углубляться в тему, читая статьи из интернета или проводя часы в Youtube, просматривая вебинары посвященные пройденному или ролики о новых трюках в Figma. Да, Figma заменила мне теперь и Люстру и Шоп. Вот уже четыре месяца я работаю в обычном браузере только на Figma. Дело не в удобстве. Мне захотелось отказаться от моих обычных инструментов чтобы привыкнуть к новой среде. У меня получилось. Появилась скорость, работа с горячими клавишами упростила процесс. Проекты которые нам дают в Яндекс.Практикуме обеспечивают развитие творческого потенциала. Один из проектов, который перевернул мой аналитический ум, ставил задачу усовершенствовать часть флоу реально существующей программы. Вместо выполнения поставленной задачи, я умудрился увлечься полным флоу, разложить весь сценарий со всеми дополнительными в огромнейшую схему взаимодействия. Когда я окончил работу, мне было совершенно очевидно, где я могу что-то изменить не повреждая другие блоки взаимодействий. И именно после этого задания, я понял, что потратив много времени, я отошел от задания. Меня это отрезвило. Ведь конечная цель любой работы придерживаться выполнения поставленной задачи. И тут дилемма. Хочется знать как работает приложение чтобы сделать его лучше. А нужно сделать лучше только в рамках некоторого блока. :) В следующем проекте я уже учитывал свою особенность перерабатывать и следую плану разработки. :) Эти же задания вызвали у меня много вопросов в отношении расположения активных элементов. Подняв эту тему в одном из чатов, я получил ответ отсылающий меня на исследования каких-либо учёных умов в области человек-машина. Я задумался над пользовательским опытом ещё до создания MVP. То есть понял, что для меня критично знать зоны активной деятельности на экране, обоснованные научными исследованиями и практикой использования. Мы рисуем эту кнопочку в этом углу не просто так. Так диктует пользовательский опыт. При этом в данном конкретном сегменте нового приложения этого опыта может не быть. Его нужно получить или предположить, каким он может быть. Удобство управления не в плоскости одного экрана, а в сценарии и последовательности взаимодействий, чтобы получать максимально короткие цепочки связей для формирования результата и предоставления пользователю вот моя стезя. Здесь я и хочу себя применить.

UI это бусы на нитях UX.

В этой структурности и порядке есть красота и польза для людей которые будут потреблять конечный продукт. UI это бусы на нитях UX. Каким бы значительным не был UX, UI это часть мира пользователя. Лояльность пользователя определяется не только удобством смыслового содержания действий, но и красотой и пониманием интерфейса. Поэтому UI также необходимо осмыслять и давать оценку его применимости основываясь на психологии человека, а также системы визуального и тактильного восприятия. К этим умозаключениям меня подтолкнула собственная цепочка действий - желание сменить профиль работы, курс "Дизайнер интерфейсов" от Яндекс.Практикум, общение в чатах UXUI дизайнеров. У меня складывается новое понимание системы взаимодействия под названием "Человек-машина", где интерфейс центр сознания обоих. Ведь человек это сознательное существо, и машина какую бы работу не выполняла, наделена свойствами, определяющими её сознание. Задача дизайнера интерфейсов создать модуль общения для обмена продуктом сознания обоих объектов. Мне кажется, что дизайнер интерфейсов или лучше сказать конструктор интерфейсов, это профессия будущего. И функциональные обязанности профессии шире во много раз, по сравнению с нынешним пониманием, ограничивающимся только вэб и мобильной разработкой.

P.S. Чтобы больше знать о пользовательском опыте создал сообщество UX в VK. Надеюсь наполнять его исследованиями в области интерфейсной науки.

Подробнее..

Категории: Дизайн , Дизайн мобильных приложений , Дизайн интерфейсов , Ui , Ux , Дизайн сайтов , Ux/ui

	Русский
	English