8162
Блог о продуктовом дизайне. По рекламе — https://bit.ly/46IJwSH Канал с вакансиями — @dui_work Канал в Дзен — https://dzen.ru/dui Автор: @astract Поддержать канал https://t.me/duiux/1481
Framer готовит что-то интересное на 31 мая. По всей видимости можно будет дизайнить и прототипировать внутри одного приложения.
Adobe XD где-то плачет.
https://youtu.be/Nzu7wVe4Qms
Проектирование голосовых приложений и как они работают.
Перед тем, как давать советы по разработке, автор рассказывает, как работает голосовое управление.
Устройство постоянно слушает пользователя. Если оно услышит команду для активации (это может быть Окей гугл, Алекса или какая либо другая), оно отправляет вопрос пользователя в облако платформы. Используя автоматическое распознание речи (ASR) и понимание естественного языка (NLU) оно преобразует вопрос и отправляет его в поддерживаемое приложение. Приложение обрабатывает полученный запрос и отвечает голосом, или отображает ответ визуально, если есть такая возможность. Всё это происходит в считанные секунды.
Руководство по созданию голосового приложения:
1. Поймите ценность приложения. Чем голосовой интерфейс будет лучше графического? Вот основные причины использования голоса по статистике 2016 года в США. У голосового интерфейса выше юзабилити, не нужно вникать в различные менюшки в приложении. Выше скорость получения результата, удобно использовать когда заняты руки (hands free).
2. Определите стиль общения голосового помощника. Для написания голоса Alexa, Amazon пыталась отразить те атрибуты которые они ценят больше всего. Они сделали голос помощника, умным, сдержанным, но с долей юмора. При ответе на вопрос, помощник может менять тип общения в зависимости от заданого вопроса.
3. Определите возможности голосового приложения. Например, банковское приложение может просто сообщать баланс на вашем счёте, но возможно вы захотите сделать что-то поинтересней.
4. На основе заданных возможностей продумайте сценарии использования с описание проблемных ситуаций. Учитывайте альтернативные формулировки вопросов.
5. Тестирование. Важно перед началом разработки всё протестировать, на этом этапе проще исправить и выявить проблемы. Amazon и Google предоставляет инструменты для проведения голосового тестирования.
6. Начать разработку.
В конце статьи автор приводит ссылки на другие материалы по разработке голосовых интерфейсов.
Статью можно смело сохранить в закладки.
https://goo.gl/lbRBmI
Большой материал о принципах анимаций в интерфейсах, которые улучшают взаимодействие с ним. И в чем разница между типами взаимодействий в реальном и нет времени.
Оригинал статьи - https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc?source=linkShare-e35e11283e3f-1494235980
Перевод (но местами из-за перевода терминов он выглядит очень странным) - http://sketchapp.me/udobnyj-interfejs-s-pomoshhyu-dvizheniya-12-principov-ux-animacii/
Короткая заметка об использовании кнопки «наверх»
1. Кнопку имеет смысл делать на страницах с длинным контентом.
2. Делать кнопку не навязчивой и лучше отображать её в момент когда пользователь начинает прокручивать страницу в обратном направлении.
3. Ранее появление кнопки может мотивировать пользователя отказать от прокрутки страницы. Как сказал автор в заметке «А чего тебе крутить вниз, там ничего интересного, давай-ка вверх»
https://goo.gl/8nRuVo
#вакансия
Realtimeboard ищет профессионального веб-дизайнера в офис, которого вдохновит разработка дизайна для международного продукта с миллионом пользователей.
Сервисом пользуются UX/UI дизайнеры и менеджеры из Twitter, Ikea, Autodesk, Cisco, Adobe, Unity, Lenovo, PwC, Deloitte, EY и других компаний.
Работа в Перми. Компания поможет с переездом и предоставлением необходимых условий для кандидата.
Подробное описание вакансии - https://goo.gl/KaOp2m
Шаблон создания адаптивных иконок для Android O. Для всех популярных графических редакторов. https://goo.gl/bJd97H
На самом деле в паке шаблоны для всех систем. Поэтому рекомендую скачать для работы.
#tool
Три стратегии, как обрабатывать случайные нажатия пользователя в приложениях:
1. Действие пользователя принимается без какого либо подтверждения и отмены.
2. Появление алерта с подтверждением действия.
3. Возможность отмены совершенного действия.
Выбирать необходимый метод можно исходя из принципов частоты использования действия и его серьёзности.
Если действие используется часто - автор рекомендует первый или третий метод.
Если действие имеет серьёзные последствия после нажатия - второй или третий метод.
https://goo.gl/WO7LR0
Плагин для просмотра CSS свойств в браузере Chrome. https://goo.gl/Z9cQh0
#tool
Исследование на тему использования голосовых технологий. В опросе участвовала тысяча респондентов из Британии.
- Популярны голосовые технологии от Amazon, Google и Apple.
- 37% пользователей используют голосовые технологии хотя бы раз в месяц, 18% минимум раз в неделю.
- Люди 18-34 лет, богатые с доходом выше 50 тыс. фунтов используют голосовые технологии чаще других.
- Люди используют голосовые технологии, потому что это проще и естественней в использовании.
- 41% пользователей использует голосовые технологии, когда им лениво.
- Голосовые технологии используют вне общественных мест. Дом, в машине.
- Основное применение - поиск информации, управление смартфоном, включение музыки и совершение звонков.
- 18% пользователей покупали товары с помощью голоса используя Alexa от Amazon. Но люди не доверяют таким покупкам и всё равно проверяют заказ.
https://goo.gl/IIDOHq
Если вы ещё не слышали про вариативные шрифты, то самое время разобраться что это такое.
Вариативный шрифт (variable font) - один шрифтовой файл, включающий в себя множество начертаний. Работая с ним можно контролировать каждый параметр шрифта: насыщенность, пропорции, контраст, изменение размера. Таким образом создавать бесконечное число вариантов одного шрифта.
Демонстрация работы и подробное описание в статье - https://goo.gl/jZKLY8
Трейлер сериала на русском - https://www.youtube.com/watch?v=-OyCk6hs_hA&t
Читать полностью…
Руководитель портальной дизайн-команды в компании Mail.Ru Group Юрий Ветров, запустил сайт коллекцию про алгоритмический дизайн http://algorithms.design/
Если вы не поняли о чём речь и что такое алгоритмический дизайн, то можете прочитать подробнее об этом блоге у Юры - https://goo.gl/dzdL7D
Microsoft провели исследование по узнаваемости кнопки «поделиться» и после отказались от своего круглого варианта в пользу старого варианта от Apple со стрелкой.
https://goo.gl/3COZkm
Думаю, среди подписчиков канала найдутся люди, которые хотят развиваться в сфере проектирования и дизайна интерфейсов.
Наверняка вы уже слышали о "Нетологии". Это образовательный сервис в рунете, курсы в котором ведут эксперты крупных технологических компаний: Яндекс, Google, Mail. Практические занятия строятся на реальных проектах, а по окончании вы получите сертификат.
Для подписчиков моего канала - скидка 2500 руб. на любой курс из программы дизайн и проектирование, по промокоду duiux
В программе обучения есть направления: проектирование и дизайн интерфейсов, дизайн для мобильных приложений и другие.
Я считаю это неплохой вариант войти в профессию или подтянуть и структурировать свои знания.
Программа курса по ссылке - http://netolo.gy/c8U
#реклама
О типографике и сетке.
В девяти пунктах автор рассказывает о создании типографической базы и формирование сеточной структуры.
Основные шаги:
- Цели. Определите принципы вашего бренда и дизайна.
- Иерархия. Старайтесь использовать реальный или близкий по теме текст для дизайна.
- Подберите шрифт для заголовков и основного текста. в этом могут помочь сервисы по подбору шрифтовой пары.
- Подберите размер шрифта и высоту строки. Удачное соотношение между 1.2 и 1.5.
- Определите масштабирование. Cервис type scale поможет определить прогрессию размеров.
- Длина строки. Оптимальное значение длины строки 65-85 символов.
- Вертикальное расстояние. Высота строки должна составлять половину или полную базовую высоту строки.
- Настройте горизонтальную и вертикальную сетку.
http://sketchapp.me/garmonichnaya-tipografika-i-setki-rukovodstvo/
О редизайне эмоджи в новом Android O.
Из плоских эмоджей, в круглые формы с градиентами и ободками.
https://goo.gl/fCFRFv
Microsoft представила дизайн систему Fluent Design System. Концепция основывается на использовании света, материалов, движения, масштабирования и глубины. Во многом система похожа на Material Design от Google.
Вернулись к блюрам, прозрачным поверхностям, которые появились в первые в Windows Vista.
Крутое видео о дизайн системе https://youtu.be/vcBGj4R7Fo0
Гайд, как можно оптимизировать Sketch файл.
Суть - не вставляйте в макет изображения высокого разрешения.
https://goo.gl/UGWJyU
Наборы реальных данных для использования в дизайне с возможность экспорта в JSON. Хорошо подойдёт в связке с плагином Craft от Invision.
- Галлерея реальных данных https://goo.gl/Sg0ESD
- Плагин Craft https://goo.gl/xd9vjX
#tool
Искал шаблон Android пермишенов для показа в рабочем проекте, но не нашёл. Поэтому собрал его для себя и делюсь с вами скетч файлом.
Возможно кому нибудь он будет так же полезен.
Канал достиг первой тысячи читателей. Спасибо вам большое, что читаете его! 😊
👍Я был бы рад если вы оцените канал в каталоге и напишите отзыв - https://goo.gl/wnFp9I
Любой фидбек можете писать мне лично @astract
Перевод статьи Николая Бабича о разнице использования чекбоксов и переключателей.
Нажимая переключатель, пользователь ожидает мгновенной реакции. Это аналогично переключателю света.
От чекбокса пользователь же не ждёт такой реакции, то что он выбрал произойдёт позже, после отправки формы или сохранения настроек.
https://goo.gl/VOR1ei
Краткая иллюстрированная история развития iOS - https://goo.gl/LFCRuo
Хотел бы взглянуть подобное и про Android. Поделитесь ссылкой если встречали?
Продакт дизайнер Statsbot Влад Понаморенко написал статью, почему Figma лучше Sketch и как её удобно использовать в работе с командой.
Лично я в очередной раз задумался попробовать её в деле в будущих проектах.
https://goo.gl/CIM240
Продуктовый дизайнер Антон Бадашов подготовил материал о принципах дизайна, которые применяют Google, Apple, Facebook и другие компании в своих продуктах. Понимание и применение этих дизайн принципов поможет создавать качественные продукты.
Четыре принципа дизайна:
- Принципы самого дизайна: набор базовых качеств, определяющих хороший дизайн.
- Принципы дизайн-процесса: рекомендации, которые помогают выстроить работу команды так, чтобы добиваться ожидаемого результата.
- Продуктовые дизайн-принципы: как продукт должен восприниматься пользователями, какие эмоции пробуждать, чем отличаться от других.
- Принципы дизайн-систем: как унифицировать пользовательский опыт в различных условиях и на всех платформах.
https://goo.gl/Osy0HP
Хорошие ребята, занялись переводом сериала от Netflix - Abstract: The Art of Design. Документальный сериал рассказывает истории восьми талантливых мировых дизайнеров.
Первая серия в переводе доступна для просмотра по ссылке - https://goo.gl/JAjqkG
UX лаборатория Мейл.ру и команда медиапроектов компании, провели большое и качественное исследование, как люди читают медиа, и читают ли вообще. В исследовании участвовали 10 респондентов, каждый из которых принадлежит к одной из группе людей: профи и обычные люди.
Основные вопросы в исследовании:
- Как часто и как долго люди читают?
- Читают или бегло просматривают статьи?
- Как люди выбирают, какие статьи читать?
- Что удерживает внимание?
- Какие приемы работают?
- Какие есть стратегии потребления информации?
Некоторые выводы из результатов:
- Люди читают.
- Редко делятся прочитанными статьями.
- Переходы к статьям идут из соц. сетей.
- Доверяют авторитетным источникам.
- Крайне редко переходят по ссылкам внутри статьи.
https://goo.gl/hOkFgO
#research
Frontend разработчик и аналитик AIC Анастасия Барыбина подготовила исследование о современных возможностях интерфейсов для людей с ограниченными возможностями.
Основные тезисы из статьи:
За стандарты разработки сайтов для людей с ограниченными возможностями отвечает WCAG (Web Content Accessibility Guidelines), рекомендации по доступности содержимого веб-ресурсов.
WCAG выделяет четыре основные принципа доступности:
1. Воспринимаемость.
2. Управляемость.
3. Понятность.
4. Надежность.
Совместить все требования стандартов с крутым дизайном, функционалом и кроссбраузерностью практически невозможно.
О Цвете.
- Не используйте один цвет для единственного способа передачи визуальной информации. Добавляйте к кнопкам подписи и значки, которые помогут пользователю понять предназначение.
- Предоставляйте пользователю кастомизацию цветовой схемы.
О Тексте
- Текст должен быть контрастный, не менее 7:1.
- Предоставляйте возможность кастомизации и масштабированя шрифта до 200%, без потери контента и функциональности.
О слепых пользователях:
Слепые пользователи активно используют «скрин ридеры», софт, которые озвучивает информацию с экрана. Поэтому весь не текстовый контент должен иметь текстовый эквивалент.
- Для ссылок и картинок нужно указывать альтернативное описание в атрибуте alt=«...»
- Контент, которые создан в целях оформления должен игнорироваться скрин ридерами. Используйте пустой атрибут alt=«»
- Для правильной последовательности чтения скрин ридерами, важно построить правильную семантику вёрстки сайта.
О людях с нервными и психическими расстройствами.
Важно избегать мерцания объектов. Элементы не должны менять своё состояние более 3 раз в секунду. Так же стоит исключить появление звуковых и неожиданных сигналов.
https://goo.gl/tcUHw3
Михаил Капанага рассказывает, как можно прокачать формы ввода и избежать многих ошибок при заполнении.
Например, в поле «почта» вводить только латиницу, независимо от раскладки пользователя. В номере телефона, 8 заменять на +7 (если клиент из России). В статье есть ещё про заполнение данных карты и даты.
https://goo.gl/0YNh8O
Люди имеют склонность верить в то, что продукт, который выглядит лучше, лучше и работает, даже если это на самом деле не так. Другими словами, пользователи, которые положительно относятся к визуальной части вашего дизайна, будут более терпимы к мелким интерфейсным ошибкам.
https://www.nngroup.com/articles/aesthetic-usability-effect/