История дизайна. Почему гиперссылки синие?

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

Но теперь я полностью поглощен вопросом: ПОЧЕМУ ссылки синие? КТО решил сделать их такими? КОГДА было принято это решение и КАК оно смогло оказать такое долгосрочное влияние?

Я обратился к своим коллегам с просьбой помочь мне в этом исследовании, и мы начали искать ответ. В браузере Mosaic, выпущенном Марком Андреессеном и Эриком Биной ​​23 января 1993 года, были синие гиперссылки. Чтобы по-настоящему понять происхождение и эволюцию гиперссылок, я совершил путешествие по интерфейсам и истории технологий, чтобы изучить, как оформлялись ссылки до эры цветных мониторов и как быстро развивались интерфейсы и гиперссылки с их появлением.

Содержание статьи 
Предки синей гиперссылки
Так кто же сделал ссылки синими
Кто это сделал первым?
Что было после синей ссылки?
Так почему гиперссылки синие?
Рапсодия в цвете #0000FF

Читать: https://ux.pub/istoriya-dizayna-pochemu-giperssylki-sinie/

Почему в Figma стоит использовать фреймы, а не группы

Разбираем различия между фреймами и группами и причину, по которой фреймы намного мощнее.

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

Содержание статьи

Группы vs фреймы
Суперсилы фреймов
1) Независимое изменение размера
2) Применение стилей
3) Содержимое, выходящее за края
4) Изменение размера с ограничениями
5) Изменение размера с помощью auto layout
6) Разметки и сетки
7) Создание компонентов
Фрейм-челлендж
Советы, как быстро создавать фреймы в Figma 

Читать статью: https://design-glory.com/8674/pochemu-v-figma-stoit-ispolzovat-frejmy-a-ne-gruppy

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

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

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

1. Редукторы возражений
2. Последовательный призыв к действию
3. Использование подзаголовков для ответа на вопросы пользователей
4. Отзывы, в которых рассматриваются возражения пользователей
5. Сильный сторителлинг

Читать: https://design-glory.com/9933/lending-luchshie-praktiki-dizajna-kotorye-uvelichivayut-konversiyu

Как создать прототип мобильного приложения в 5 шагов

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

Фундаментальная отсылка. Прототип — это быстрая, черновая реализация будущей системы. А еще это работающая модель, опытный образец устройства или детали в дизайне, конструировании, моделировании. Термин прототип произошел от древнегреческого πρῶτος «первый» + τύπος «отпечаток, оттиск» или первообраз.
«Одна картина стоит тысячи слов. Один прототип стоит 1 000 встреч.»
— Конфуций и Джон Маэда, дизайнер
В этой статье я расскажу о том, как создать прототип мобильного приложения. В результате у вас сложится полное представление о ценности прототипов, и вы даже сможете начать собирать их самостоятельно.

Содержание:
Что такое прототип для чего он нужен
Инструкция по разработке прототипа мобильного приложения
Шаг 1. Определите полезное действие и конек
Шаг 2. Зарисуйте Sketchflow ключевых экранов и протестируйте бумажный прототип
Шаг 3. Перенесите бумажный прототип на интерактивную бумагу
Шаг 4. Придайте прототипу профессиональный облик 
Шаг 5. Поделитесь прототипом с заинтересованными в проекте и потенциальными клиентами и сделайте корректировки
8 моментов, которые важно учесть при создании прототипа
3 примера хороших прототипов мобильных и веб-приложений
Вывод и рекомендация

Читать: https://ux-journal.ru/kak-sozdat-prototip-mobilnogo-prilozheniya-v-5-shagov.html

10 лучших инструментов, которые упростят жизнь UX-дизайнера

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

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

Содержание статьи 
Как выбрать правильные инструменты UX-дизайна?
UI и UX дизайн постоянно развиваются
Лучшие инструменты исследования
1. Hotjar — Получайте фидбек от пользователей
2. Google Analytics
3. Пользовательские интервью – старомодный инструмент UX-дизайна
Инструменты для создания вайрфреймов
4. Sketch
5. Balsamiq
Лучшие инструменты создания интерактивных прототипов
6. Adobe Xd
7. Figma
8. InVision
Завершение дизайн процесса. Передача проекта разработчикам
9. Framer
10. Figma

Читать статью:https://ux.pub/10-luchshih-instrumentov-kotorye-uprostyat-zhizn-ux-dizaynera-v-2021-godu/

Исследование главной страницы сайтов электронной коммерции. 8 распространенных UX-ошибок

Основные выводы:
Тест 60 веб-сайтов электронной коммерции, проведенный в конце 2020 года показывает, что в целом у домашних страниц неплохой UX.
Однако 32% сайтов предоставляют либо посредственный, либо плохой опыт.

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

Домашняя страница остается «входной дверью» для многих пользователей, начинающих обзор сайта.

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

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

Тест содержит 10 900+ элементов домашней страницы и категорий, которые были вручную проверены и оценены командой UX-исследователей Baymard, а также 3100 примера от 60 самых прибыльных сайтов электронной коммерции США и Европы.

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

Содержание:
Текущее состояние UX домашних страниц
8 распространенных UX-ошибок и стратегических упущений домашних страниц
1. На главной странице 6% сайтов представлен недостаточно широкий ассортимент товаров
2. 59% сайтов используют на главной странице чрезмерно агрессивную и отвлекающую рекламу
3. 75% сайтов, использующих карусели, используют их неправильно
4. 62% сайтов не помогают пользователям выбрать определенную область действия непосредственно с главной страницы
5. 19% сайтов не используют на главной странице персонализированные изображения и дизайн
6. 22% сайтов не отображают поле поиска на главной странице
7. 35% сайтов неправильно используют выбор страны и языка
8. 43% сайтов не используют эффективный стиль интерактивных элементов интерфейса
Качество UX домашней страницы снизилось

Читать: https://ux.pub/issledovanie-glavnoy-stranitsy-saytov-elektronnoy-kommertsii-8-rasprostranennyh-ux-oshibok/

6 важных обновлений Behance. Интеграция прототипов, 3D-объектов, NFT-токенов, стримы

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

Чтобы добавить в кейс прототип, вам необходимо связать макеты в Figma, нажать кнопку «Get embed code» в разделе просмотра прототипа и вставить код в кейс с помощью кнопки «Embed Media» или «Embed Prototype». Аналогичный алгоритм присутствует в Adobe XD, но лично я больше привык работать с сервисом Figma. Если вы хотите использовать прототипы из Figma, будьте осторожны, так как к исходному коду можно получить доступ через инспектор кода. Чтобы этого избежать, вы можете перенести макеты в новый документ, запретить копирование объектов или растрировать все элементы в прототипе. А для особо любопытных можно оставить пасхалку в исходном файле.


Добавление 3D-объектов
Эта функция поможет дизайнерам интерьеров показать комнату изнутри, позволяя наблюдателю совершить прогулку с помощью 3D-тура. Кроме того, эта функция подходит, если вам нужно вставить 3D-объект. Например, если вы хотите показать дизайн созданного вами предмета. Чтобы добавить объект, просто скопируйте ссылку из Sketchfab, ArtStation или Autodesk.

Алгоритм действий такой же, как и у прототипов. Кроме того, список источников для импорта довольно обширен: Adobe XD, Adobe Spark, Adobe Voice, Amazon Widget, Appointy, Artstation, Bandcamp и др.

Несмотря на то, что Figma является прямым конкурентом Adobe XD, захватившим значительную часть рынка Adobe, было приятно увидеть ее в этом списке.
Возможность прикрепить файл к кейсу
При создании кейса вы можете указать ссылку на скачивание файла. У вас есть возможность предоставить ссылку на покупку шрифта, который использовался в кейсе или ui-kit, который вы не прочь подарить Junior-дизайнерам для экспериментов. Это было возможно и раньше, но Adobe решила избавиться от этого костыля.

Creative Challenges
Это раздел с небольшими мастер-классами по продуктам Adobe: Photoshop, Illustrator, XD. Здесь вы найдете ежедневные задания для практического изучения функциональности графических редакторов. Задачи короткие и простые, идеально подходят для начинающих. По завершении результат можно отобразить в виде кейса, а лучшие работы получат достижения. Приятным бонусом станет дополнительная ачивка для коллекции.
Проведение собственных стримов

Теперь вы можете не только смотреть прямые трансляции и вебинары, но и записывать свои собственные. Теперь Behance предоставляет возможность проведения вебинаров на собственной платформе. Стримы можно записывать, демонстрируя работу на iPad или ПК. Если у вас есть что рассказать о работе с Fresco, Illustrator или Photoshop на iPad, сделайте это на Behance. Раздел Live был создан именно для этого. Завершенные трансляции будут сохранены в разделе Live Streams.

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

Маркетплейс NFT-объектов
Нет, это не шутка. Теперь вы можете разместить в портфолио свои NFT-токены.
Behance позволяет размещать работы в своем профиле на вкладке NFT, если вы продаете свои работы через торговые площадки. Для этого вам необходимо добавить кошелек и привязать учетную запись платформы к своему портфолио с помощью MetaMask, Phantom или Temple. Тип фреймворка, на котором хранится ваш NFT-токен, не имеет значения; главное, чтобы через MetaMask можно было сделать ссылку.


Источник

Типографика данных в интерфейсах

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

Обзор
В нашей дизайн-системе есть 4 основных стиля типографики, которые помогают потребительским товарам оставаться простыми (принцип K.I.S.S.): стили Headline, Title, Subtitle, и Body.

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

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

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

Наши основные стили и рекомендации не учитывали все сценарии использования оперативной типографики. Так появился TVA (Type Variance Authority), задача которого не только устранять наиболее серьезные нарушения, но и находить варианты, необходимые для поддержки типографики данных.

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

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

Источник

Доступность: искусство дизайна для всех

7 рекомендаций по созданию более инклюзивного интерфейса.

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

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

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

Читать статью: https://design-glory.com/?p=9322

Дизайн-система: синдром LEGO-наборов

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

Что произойдет, если 5 дизайнеров будут одновременно создавать текстовое поле?

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

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

Библиотека паттернов может породить синдром наборов LEGO

Без сомнения, собранные наборы конструктора LEGO выглядят великолепно.
Однако, как отмечает доктор философии Дерек Кабрера, взрослые, производящие наборы LEGO, мыслят творчески. Но в итоге дети учатся следовать инструкциям.

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

Такой подход заставляет дизайнеров смотреть на дизайн-систему, как на наборы LEGO.
В результате, когда дизайнеры работают над конкретной проблемой взаимодействия, они думают: «Хорошо, какие из доступных компонентов или паттернов я могу использовать?» И при этом они не оценивают поможет ли компонент эффективно решить проблему.

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

Я подозреваю, что синдром наборов LEGO – один из факторов, которые не дают нам возможности внести свой вклад.

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

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

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

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

Источник