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

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

Содержание статьи 
1. Поддержка входа в систему с помощью аккаунтов в социальных сетях и функции «Вход с Apple».
2. Не используйте имя пользователя
3. Попросите пользователей соблюдать правила безопасности при создании пароля.
4. Запретите пользователям использовать распространенные пароли
5. Добавьте индикатор надежности пароля
6. Разрешите пользователям делать пароль видимым
7. Не просите пользователей дважды вводить адрес электронной почты или пароль
8. Не просите пользователей подтверждать электронную почту сразу после регистрации
9. Используйте двухфакторную авторизацию или приложение для авторизации
10. Разрешить людям использовать аутентификацию по отпечатку пальца или лицу для входа (в основном с мобильных устройств)
11. Поддержка функции «Забыли пароль»
12. Поддержка входа без пароля.

Читать: https://bit.ly/3BDqaPh

Сквирклморфизм (Squirclemorphism) в дизайне интерфейсов

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

Если вы хотите узнать формулу, лежащую в ее основе, ознакомьтесь с описанием из Википедии или исследованиями, проведенными Figma Engineere.

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

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

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

Повсеместное распространение сквирклов побудило меня назвать этот тренд – Сквирклморфизм (Squirclemorphism)! Что интересно, сам стиль заключается только в использовании формы суперэллипса. Он может быть связан с нейоморфными или глассморфными элементами.

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

Я люблю просматривать дизайны на Dribbble, чтобы найти вдохновение или интересные стили и композиции. Введите «squircle» в поиске Dribbble, и вы увидите сотни результатов.

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

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

Чтобы добиться особой формы, вам нужно добавить «Corner Smoothing» (Сглаживание углов) к радиусу скругления угла. Чтобы активировать сглаживание, вы должны нажать иконку радиуса скругления угла, чтобы отобразить подробные настройки радиус для каждого угла. Затем под иконкой меню с тремя точками вы найдете параметр «Corner Smoothing». Кликните по нему, и вы увидите всплывающее окно с ползунком.

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

Сквирклы в Sketch
Создавать сквирклы в Sketch еще проще. Когда у вас есть слой в форме прямоугольника с закругленными углами, все, что вам нужно сделать, это перейти на панель Inspector (та, что справа) и выбрать раскрывающийся список «Radius (Round Corners»). Измените параметр на «Smooth Corners». Все, ваш сквиркл готов!!

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

Источник

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

Преодолеть преграды в игре, а затем — в учёбе и в жизни. Такую цель перед пользователями поставило агентство Go Mobile, создав игру для онлайн-платформы GeekBrains. В этой статье вы узнаете, как сделать лендинг-игру на JavaScript всего за неделю и какие результаты можно получить, используя креативный подход.

Содержание статьи:
Цель: привлечение новых пользователей
Механика игры: ловить или избегать
Дизайн: хищники, монстры и злые люди
Разработка и вёрстка: неделя на все
Дизайн дополнительных материалов
4 совета тем, кто создает игры для брендов

Читать: 
https://bit.ly/2XiLtXJ

6 правил UX, которые тебе нужны

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

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

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

Творчество – это весело и может заставить вас почувствовать себя успешным, но если это не впечатляет пользователей, оно не может быть частью процесса UX-дизайна.

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

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

Если у персонажа 1 большой располагаемый доход, а у персонажа 2 – нет, и они оба важны для вашего дизайна, вам нужно найти способ приспособить их обоих, а не просто сосредоточиться на одном из них. В противном случае вы получите «идеальный» UX, которому удастся пренебречь большой частью ваших посетителей.

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

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

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

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

Если кто-нибудь задаст вопрос: «Разве мы еще не разобрались с UX?», Он не обращает на это внимания. Самая ценная информация и отзывы часто становятся доступными только в конце дня, а достаточно хорошее на самом деле недостаточно хорошо в долгосрочной перспективе.

Правило 6: Текст
В какой-то момент истории UX-дизайна кто-то решил, что создание макетов и заполнение их поддельным текстом (обычно Lorem ipsum) – хорошая идея. На самом деле это не так, и чем раньше вы избавитесь от привычки использовать пустую копию, тем лучше вам будет.

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

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

Пошаговый процесс создания логотипа. Ресерч – идея – концепт – презентация – утверждение

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

Функции логотипа:
Представление компании на рынке.
Информирование рынка и аудитории.
Формирование имиджа бренда.
Выделение компании и ее продукта среди конкурентов.
Защита прав собственности.
Гарантия качества для потребителей.
Привлечение внимания к бренду.
Повышение лояльности потребителей.
Основа для фирменного стиля.

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

Этапы создания логотипа

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

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

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

Мозговой штурм подразумевает несколько этапов:
Аналитические выводы – Идеологическое содержание – Словесное описание образа – Ассоциации – Визуализация образа

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

Этап 4. Создание наброска
Эскизы логотипа сначала рисуются вручную на бумаге. Принято делать от 16 до 20 версий. Фотографии эскизов отправляются заказчику на рассмотрение. Затем проводят сеанс конференцсвязи, чтобы клиент мог выбрать 3-4 лучшие версии.

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

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

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

Источник

Каждый дизайн — это система

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

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

Читать статью: https://bit.ly/3n4OQw3

Реальная цена редизайна большого продукта

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

В UX и особенно в UI дизайне, тренды приходят и уходят каждые пару лет. Некоторые из них вызваны появлением новых технологий, таких как устройства с сенсорным экраном или новых свойств CSS (помните безумие, когда запустили CSS3?). У организаций есть разные способы борьбы с этими сдвигами, вызванными трендами, и один из них, на мой взгляд, чрезвычайно рискованный, но популярный.
Постепенное улучшение или полный редизайн
Кажется, что компании, достигшие определенного уровня зрелости дизайна, всегда подходят к редизайну интерфейса путем постепенного улучшения. Подумайте о таких приложениях, как AirBnB, Spotify или продуктах пакета Google Suite – как часто вы видите, чтобы они кардинально менялись за ночь?

Читать статью: https://bit.ly/3BGEE0M

Что такое юзабилити-тестирование и как провести его правильно

UX-исследователи применяют юзабилити-тестирование, чтобы обнаружить барьеры и выявить точки роста в дизайне. Как именно? Давайте разбирать 👇

Фразу “юзабилити-тестирование” еще употребляют в качестве синонима фразы “пользовательское тестирование”.

Иногда возникают возражения по поводу использования фразы “пользовательское тестирование”, так как кажется, что исследователи тестируют пользователей. Но это в корне неверно: мы никогда не тестируем пользователей – только интерфейс. Этот термин о том, что тестирование проводится совместно с пользователями – это важный аспект эмпирических исследований.

Содержание:

Что такое юзабилити-тестирование
В чем ценность юзабилити-тестирования
Что требуется для проведения юзабилити-тестирования
Типы юзабилити-тестирования
Дополнительные ресурсы NNGroup
Вывод и рекомендации

Читать статью: https://bit.ly/3yTiSFz

3 Способа развить дизайнерское чутье

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

Однако, несмотря на трудности, некоторые люди все же чувствуют, что должны рискнуть и попробовать изучить этот технический и творческий процесс, который представляет собой UI/UX дизайн. Я принадлежу к таким людям и поэтому хочу рассказать, как развила дизайнерское чутье и какие уроки извлекла на пути к этому.

Урок №1: Искусство это не то же самое, что дизайн
Урок №2: Дизайн это не просто про визуал
Урок №3: Разнообразный дизайн – хороший дизайн

3 упражнения, которые помогут развить дизайнерское чутье

Упражнение №1: Изучите приложение, которым вы никогда не пользовались
Упражнение №2: Практикуемся создавать прототипы копируя
Упражнение №3: Выйдите и понаблюдайте за пользовательским опытом в дикой природе

Читать статью: https://bit.ly/38BJ1xI