Несколько советов, как отвечать на вопросы брифа или ТЗ

Никогда не отвечайте на вопросы общими фразами. «Хочу, чтобы было супер круто», «Хочу, чтобы все удивились», «Хочется бомбу!» — эти фразы ничего не скажут дизайнеру о проекте. Пытайтесь конкретизировать свои требования: «Хочу ярко», «Нужно, чтобы заголовок был на первом месте», «Думаю, тут подойдёт неоновый стиль» и т.д.;

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

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

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

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

Источник

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

Как и где собирать библиотеку референсов?

Можно собирать подборки и добавлять кейсы в избранное прямо на Behance или Dribbble. Так же, можно собирать ссылки в каком-нибудь онлайн блокноте. Но все эти методы не очень удобные . Кейсы целиком очень трудно сортировать и искать среди них нужное решение.
Самый оптимальные способ, как мне показалось, это — собирать референсы прямо в Figma. Для этого нужно разбить все блоки на категории: обложка, контентные блоки, слайдер, карточки и тд. В каждую категорию собираются скриншоты блоков, которые вам понравились.
Теперь ежедневный просмотр Behance и Awwwards превратился в охоту за интересными решениями, которые я складывал в свою копилку.
Вся библиотека собиралась у меня в одном документе. Для каждой категории — отдельная страница.

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

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

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

На сегодняшний день ничего лучше этой программы я еще не видел. Eagle помогает быстро подобрать подходящие референсы и найти лучшее решение.

Ссылка на программу:
https://eagle.cool/

Источник

Комплексные приложения: 8 универсальных советов

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

Что из себя представляет комплексное приложение? ,

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

Например, комплексные приложения часто:

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

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

1. Продвигайте обучение через действие

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

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

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

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

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

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

3. Обеспечьте гибкие и плавные пути

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

4. Помогите пользователям отслеживать действия и мыслительные процессы.

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

5. Координируйте переход между несколькими
инструментами и рабочими пространствами

Пользователи сложных приложений обычно работают с несколькими инструментами и несколькими рабочими пространствами. Даже если они в основном полагаются на одно специализированное приложение для большей части своей работы, то достаточно часто им приходится переключаться по ряду причин. К примеру, для сбора данных из онлайн-баз данных, поиска и ссылки на статьи или другой внешней документации или для создания собственных заметок и комментариев в других приложениях, когда основное программное обеспечение не поддерживает это действие. Даже в рамках основного приложения пользователи могут переключаться между различными средами или рабочими пространствами из-за программных настроек или других дополнительных пакетов, которые включают различные специализированные функции в приложении. Уменьшите нагрузку на переключение между инструментами, поддерживая переход из одной среды в другую как внутри, так и вне основного приложения. Один из способов уменьшить нагрузку на переключение между инструментами — просто принять экосистему и спроектировать точки подключения между основным приложением и часто используемыми сторонними инструментами. Например, сложная работа часто требует совместных действий, анализа и отчетности. Встроенные функции для экспорта наборов данных в Excel или изображений в PowerPoint позволяют пользователям экономить драгоценное время, которое в противном случае тратится на преобразование данных или создание снимков экрана при попытке составить отчеты и презентации.

Microsoft Power BI — приложение для бизнес-аналитики. Оно предоставляет функцию копирования визуальных элементов в виде изображений, позволяя пользователям быстро записывать и вставлять визуализации данных во внешние приложения.

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

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

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

8. Сделайте важную информацию визуально заметной

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

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

Вывод

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

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

Источник

Как сделать веб-дизайн уникальным

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

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

Как создать модный и в то же время особенный дизайн?

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

1. Уникальность привлекает внимание

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

Ниже я покажу, как достигается такая реакция.

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

4. Уникальность – это положительные эмоции
Любовь с первого взгляда – волнующее чувство. Такая любовь не случайна: она рождается из эстетического удовлетворения, которое мы испытываем, когда смотрим на предмет. Это также означает, что мы уверены в его качестве и незаменимости. Уникальность изделия поражает воображение, поэтому мы представляем себя счастливыми обладателями особенного предмета. Да, все как у всех, только лучше!

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

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

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

Уникальность – это особенно удачное решение проблемы.

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

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

10. Уникальность – это особая отзывчивость
Пользователь хочет почувствовать, что взаимодействие с интерфейсом красиво и ненавязчиво. Микровзаимодействия должны быть предсказуемыми и в то же время персонализированными для пользователя. Есть также вещи, которые нельзя бездумно копировать.

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

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

Источник

Принципы визуальной коммуникации

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

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

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

Сегодня я ежедневно использую визуальные эффекты. Я помогаю начинающим дизайнерам развивать их визуальную интуицию и проектировать продукты для семей, обучающихся на дому. Чтобы стать лучшим визуальным рассказчиком, нужно найти баланс между художественными шалостями и фундаментальными принципами. Речь идет о том, чтобы найти золотую середину между весельем WordArt и надежностью Times New Roman.
В этой статье мы исследуем визуальные принципы, разберем почему визуальное повествование является ценным навыком, и продемонстрируем, как улучшить навыки визуального повествования в игровой форме.

Читать статью полностью: https://ux.pub/printsipy-vizualnoy-kommunikatsii/

Как улучшить всплывающие подсказки?

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

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

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

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

№2. Они заслоняют экран: вы не можете прочитать подсказку и использовать остальную часть экрана одновременно.

№3. Могут быть разрезаны маленькими экранами: так как всплывающие подсказки перекрывают экран, они могут быть разрезаны меньшими окнами.

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

Возможные компоненты

Текст: всплывающие подсказки могут включать заголовок и основной текст – или просто основной текст. Для небольших всплывающих подсказок пропускайте формальности и переходите сразу к основному тексту. Выход: когда пользователь закрывает всплывающую подсказку. Это может быть просто кнопка «x» или «закрыть», или она может быть активирована при взаимодействии с определенным элементом. Прогресс-бар: всплывающие подсказки, которые являются частью мульти-продукта, могут включать индикатор прогресса. Они дают пользователям знать, на каком этапе те находятся.

4 простых правила для лучшего UX

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

Объясняйте только то, что неотличимо от интерфейса/дизайна.

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

Выводите их по одной и не показывайте более 3-4 подряд. Пользователи быстро устают, и им нужно время, чтобы использовать/усвоить новую информацию. Как и все остальное, анализируйте и тестируйте подсказки!

Стилизуйте их с помощью CSS

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

Источник:  https://design-glory.com/?p=9779

Объектно-ориентированный дизайн и как его использовать для проектирования систем

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

В последние годы эти области начали сближаться. Проектирование соприкасается с дизайном, а дизайн — с версткой. В этом помогают, к примеру, дизайн-системы, storybook’и, созданные по правилам разработки интерфейсов, а также современные инструменты: Figma, Sketch, InVision Studio и другие.
Фокусироваться сперва нужно на том, как система работает, и только после на том, как она выглядит. Чтобы проектировщики, дизайнеры и разработчики одинаково мыслили и лучше понимали, как решать задачи клиента, я использую разные подходы, в том числе и объектно-ориентированный дизайн.
Мой подход основан на OOUX Софии В. Пратер (https://alistapart.com/article/object-oriented-ux/), но дополняет и расширяет его, основываясь на моем опыте применения.

Зачем нужен ООД

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

ООД помогает команде решить несколько важных задач.

Определиться, с чего начать

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

Какие сущности есть в таком приложении? Наверняка там будут «пользователь», «заказ» и «котик». У «пользователя» есть имя и фамилия, а заказ можно сделать из двух мест: с экрана товара или с экрана со списком ранее оформленных заказов. Значит позже нужно подумать, как отразить это в интерфейсе.
ООД дает базис, от него можно оттолкнуться, чтобы собрать конструктор из методов, которые подходят именно для этого проекта.

Сэкономить

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

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

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

Создать MVP

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

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

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

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

Исключить хаотичные скачки

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

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

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

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

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

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

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

Здесь можно выделить объекты «пользователь» (с подтипом «HR-менеджер»), «транзакция» и «вакансия». С «вакансией» и «транзакцией» определиться легко: они точно являются объектами, с которыми проводятся операции в системе.
С «отчетом» сложнее. Это точно объект, но нет уверенности, что он должен быть частью вашей системы. Чтобы это понять, вы должны выяснить, для чего пользователю отчет и как именно он с ним взаимодействует.

Может оказаться, что HR-менеджер заходит в текущую программу, выгружает сырые данные о транзакциях в Excel, а потом идет в 1С и уже в этой системе составляет отчет привычным для себя образом. В текущем бизнес процессе возможность создавать отчет в проектируемой вами системе ему не нужна: ваша задача в новой системе дать возможность HR-менеджеру выгрузить список транзакций и не более.
В таком случае проектировщику нужно проанализировать: если сделать объект «отчет» частью новой системы, будет ли достигнут такой эффект, что это оправдает новые инвестиции? Или не стоит тратить на это время и ограничиться текущей реализацией.

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

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

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

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

4. Определяем свойства параметров
Я придумал для свойств специальные обозначения.
А — автоматический параметр. Он проставляется системой, и человек не имеет к нему отношения. Таким параметром может быть дата или время создания.
Ф — фильтруемый (или сортируемый) параметр. Пользователь может взаимодействовать с ним интерактивно. Например выводить только те экземпляры объекта, которые соответствуют конкретному значению параметра. Допустим, посетитель информационного сайта может отфильтровать новости по темам и читать только про технологии.
Р — параметр, который задается вручную пользователем и/или администратором системы.
С — статический параметр, который вшит в верстку. Им нельзя управлять, а изменить его может только верстальщик либо разработчик.
В — внутренний параметр. Он используется в больших системах, где требуются связи, которые используются для организации внутренней работы с контентом и функциональностью сервиса. Например, внутренние теги. Вакансия отмечается тегом «срочно», чтобы администратор мог в административной панели отфильтровать только те вакансии, которые отмечены этим тегом и в первую очередь начать работу над ними.
Данные этого исследования заносим в таблицу.

5. Указываем способы взаимодействия для функций
Для них тоже задают условные обозначения. У нас они выглядят так:
0 — способ доступен без ограничений любому пользователю.
1 — способ доступен с ограничениями. На данном этапе неважно, с какими именно, главное, что ограничение есть и о нем нужно детально подумать при проектировании.

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

Как это работает в моей компании
Описанную систему я периодически применяю уже несколько лет, а отдельные подходы ООД — более 6 лет. За это время мы увидели, какую пользу это приносит.

Получается точнее оценивать проекты
Раньше мы всегда работали по фиксированной цене и очень страдали, если ошибались с оценкой.
Клиенту неважно, укладывается ли аутсорсер в бюджет и хочет ли он делать какую-то работу, исполнитель должен выполнить то, что обещал по той цене, которую назвал.
Обычно мы оценивали проект страницами, делали карту сайта, максимально детализировали ее, но могли не продумать отдельные части backend. «Кто будет верстать админку?», — спрашивал разработчик в самом конце. «В смысле верстать админку?», — удивлялись остальные.

Применение ООД помогло нам оценивать проекты на 20−25% точнее. А главное, у нас появился мост между оценкой проекта и началом работы. Если клиент возвращается через месяц после оценки, у нас уже есть упрощенная модель системы — базис для начала работы.
Помогаем стартапам экономить
Порой ребята из стартапов знают про разработку цифровых продуктов столько же, сколько я про балет, но при этом они очень хотят поиграть в product-менеджеров. Стартаперы вдохновляются известными проектами, просят нас прикрутить на сайт красивую функцию, которую видели в «Инстаграме» или на Airbnb, а потом узнают, что это стоит 500 000 ₽ и пугаются.
Наша задача — показывать таким заказчикам объективную реальность. Список объектов и параметров здорово в этом помогает. Можно сказать человеку: «Смотри, если добавить параметр X, цена вырастет на 100 000 ₽, а если убрать Y — снизится на 200 000 ₽». Обычно клиент счастлив, потому что минус 200 000 ₽ — всегда классно.
Мозговые штурмы стали эффективней
Заказчики бывают разные, иногда к нам приходят сильные эксперты и мы с удовольствием учимся у них. Но бывают клиенты из малого бизнеса, которые знают о технологиях меньше, чем ничего. Мозговые штурмы с такими людьми очень непростые, но ООД помогает держать их в тонусе.

Берем профиль пользователя, кладем карточку на стол и всю встречу говорим только об одном объекте. Например, о том, как Вася взаимодействует с «вакансией». Клиент больше не отвлекается и не уходит в сторону. Раньше мозговые штурмы занимали 2,5−3 часа, а сейчас — 40−60 минут.
Появился обмен знаниями
Нам удалось без принуждения наладить постоянный обмен знаний между командами.
ООД предполагает общий документ, в котором сосредоточены ключевые знания о продукте. Обычно, члены команды подключаются к проекту по мере появление четких результатов предыдущих этапов и разработки ТЗ для их участка работ. При ООД все участники проекта могу подключаться к проекту намного раньше и раньше находить нестыковки, которые можно и нужно сразу обсуждать, вносить изменения и фиксировать в документации. Все мы знаем, как сложно и неприятно сталкиваться с ошибками в огромном ТЗ, которое уже согласовано с клиентом, и как часто участникам проекта не хочется вносить в него изменения, даже если это явно необходимо.
Проще делать контент
У нас есть партнеры, которые делают SEO. Они помогают сформировать правильную декомпозицию страниц, определяют, какие страницы объединять, а для каких делать отдельный интерфейс, в общем, разрабатывают подходящую для поисковых систем структуру. Благодаря ООД они могут работать параллельно проектированию.

Это избавляет клиентов от лишних тревог. Обычные люди, и я в их числе, понятия не имеют, что делает SEO-специалист: он целый месяц творит какую-то магию, а потом ему платят. Заказчик не хочет тратить месяц на непонятную магию, и теперь у нас есть инструмент, который позволяет всем работать сообща, отталкиваясь от одного документа.
Копирайтерам тоже важно подключаться к процессу на этапе проектирования. Раньше до начала разработки сайта они могли лишь продумать стратегию и tone of voice, а теперь берут на себя больше задач: придумывают структуру текстов по каждому объекту (теперь у них на старте есть знания о параметрах объектов и вариантах взаимодействия с ним), создают драфты, выдвигают свои требования и пожелания по формированию состава объектов.
Вместо заключения
ООД — это лишь один из методов проектирования, он очень помогает в работе, но не может заменить собой все. Обычно мы используем ООД для больших контентных сайтов или сервисов, когда систему сложно уложить в голове.
Не стоит применять ООД для небольших корпоративных сайтов из нескольких страниц. Объектов там не будет совсем или найдется несколько совсем очевидных. Для работы с ними не нужен отдельный выделенный процесс.
Еще важно, чтобы документы, составленные в процессе, вовремя обновлялись и были доступны всей команде. Если не делать этого, ООД останется лишь на бумаге, и ни разработчики, ни копирайтеры, ни дизайнеры не станут в этом участвовать.
Этот подход пригодится и для внутренних заказчиков, но аргументация может быть иной: «Если уберем эту функцию, сэкономим 50 часов на проектирование».

Источник

Как успешно провести онлайн-презентацию продукта или услуги?

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

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

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

А зачем, вообще, проводить презентацию онлайн, если можно все так же внятно сказать своими словами?
Есть как минимум три причины добавить несколько слайдов к любому выступлению:

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

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

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

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

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

Как выглядит процесс демонстрации презентации онлайн?

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

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

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

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

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

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

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

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

Проверьте, как выглядит переговорная комната глазами клиента, убедитесь, что открываются все ссылки, протестируйте работу оборудования и сделайте пробный звонок со стороны клиента.
Перед началом трансляции закройте лишние окна браузера, мессенджеры и другие приложения, которые не участвуют в онлайн-событии. Вы почувствуете себя комфортнее, если наведете порядок на рабочем столе.
Запланировали показать несколько страниц из браузера? Заранее загрузите и поставьте вкладки в порядке очереди. Соберите в отдельную папку файлы, которые будете использовать в процессе выступления. Чтобы не запутаться, не стоит держать все приложения и документы в развернутом виде. Если все будет под рукой и на видных местах — этого более чем достаточно.
Как провести интересную онлайн-презентацию
Когда психологическая техническая подготовка к презентации завершена, начинайте работать с аудиторией.

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

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

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

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

Интерактив — отличный способ сделать презентацию более интересной и живой. Особенно если запланирован длинный доклад. Оптимальный интервал для интерактива во время выступлений онлайн — каждые 5–7 минут.

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

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

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

Что в итоге?

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

Источник