Рубрика «UI» - 20

Предлагаю читателям «Хабрахабра» перевод статьи «Functional Animation In UX Design: What Makes a Good Transition?» за авторством Nick Babich.

Функциональная анимация в UX дизайне. Что делает ее эффективной? - 1

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

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

image

Данная публикация — местами вольный перевод статьи за авторством Julie Zhuo, продукт-дизайнера в Facebook. Приятного чтения.

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

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

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

«Делаем ли мы это просто для получения метрики?»
«Как мы можем сбалансировать полученные цифры и сделать при этом что-то достойное?»
И мой фаворит: «Вы, те, кто управляет данными, на самом деле заботитесь о пользователях и UX?»

Ох! Сильные слова и жгучие обвинения!

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

image

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

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

● доступа к данным о местоположении

● доступа к контактам

● доступа к камере
Читать полностью »

image

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

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

Проецируя Google Material Design на десктопную систему… (часть четвёртая и заключительная) - 1
Это будет заключительная часть о редизайне внутрикорпоративной CRM “Chronos”. Я опишу оставшиеся разделы и сделаю кое-какие выводы о проделанной работе. Тех, кто только пропустил первые три части, приглашаю пройтись по ссылкам: первая, вторая и третья. Те, кто уже утомился от моей писанины по данному проекты — сходите заварите кофейку, остальные могут проследовать глубже в подкатье
Читать полностью »

Проецируя Google Material Design на десктопную систему… (часть третья) - 1

Краткое содержание второй части: редизайн раздела “Сделки” (воронка продаж), подбор цветов для всех стадий, отступы — воздух — свобода… Упс… Клиент, ты серьёзно? Взять и запихать теперь всё в 1370х768?!.. Прощайте “отступы — воздух — свобода”… Пришлось перейти в “сжатый” стиль.

Итак, тех, кто питает интерес к продолжению обзора проделанных работ — я приглашаю под кат. А тех, кто считает что GMD для десктопной системы, полный провал — я приглашаю более настойчиво (кто знает, может быть в заключении вы услышите то, что хотите услышать).
Читать полностью »

image

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

image

Данный ленивый подход раскритикован Джоном Грубером, вот что он сказал о Daring Fireball:

Читать полностью »

Проецируя Google Material Design на десктопную систему… (часть вторая) - 1

Краткое содержание первой части: контрактный клиент, редизайн их собственной CRM-ки, стиль Google Material, привычная среда обитания, аудитория — опытные айтишники. Кто не вдохновился первой частью и остальных тоже — приглашаю под кат…
Читать полностью »

image

Статья была опубликована на smashingmagazine автор статьи Scott Lewis.

Найти недорогие качественно сделанные иконки и векторные изображения не составляет труда – именно для этого есть такие веб-сайты, как Iconfinder (где работает автор настоящей статьи). В распоряжении дизайнеров тысячи наборов иконок премиум класса, и сотни наборов доступны для бесплатного скачивания.

В данной статье приводится руководство по дизайну векторных иконок, которое включает в себя шесть этапов. Мы рассмотрим эти этапы после того, как разберем основные принципы успешного дизайна иконок. Эти принципы хорошо известны и подробно рассмотрены в таких работах, как Руководство по дизайну иконок Джона Хикса, а также в руководстве от Google Материальный дизайн в разработке системных иконок. Шесть этапов, которые мы будем рассматривать в данной статье, должны восприниматься, как рекомендации, а не как догмы. Способность чувствовать, где нужно следовать правилам, а когда их лучше нарушить – это важное качество, которое должен развить в себе каждый хороший дизайнер, и мы наглядно это продемонстрируем.

Читать полностью »

image

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

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

Но как на самом деле происходит это «вовлечение»? От чего зависит заметное и ожидаемое изменение поведения клиента? Что нужно, чтобы клиенты начали с восхищением говорить о вашем продукте?

Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js