Игорь Штанг написал о современной русской пунктуации на примере упаковки умной розетки Яндекса.
— Название компании написано кириллицей, но не в кавычках. Яндекс может себе это позволить: название на слуху, это имя собственное, упаковка — не юридический документ;
— Нет точек в конце отдельно стоящих предложений (что нормально). Но при этом точек нет и в конце пунктов списка, состоящих из нескольких предложений (внутри там точки есть);
— Переносы стоят только там, где необходимо. Это позволяет контролировать форму текста, и правый край набора получается аккуратным.
#typography
— Название компании написано кириллицей, но не в кавычках. Яндекс может себе это позволить: название на слуху, это имя собственное, упаковка — не юридический документ;
— Нет точек в конце отдельно стоящих предложений (что нормально). Но при этом точек нет и в конце пунктов списка, состоящих из нескольких предложений (внутри там точки есть);
— Переносы стоят только там, где необходимо. Это позволяет контролировать форму текста, и правый край набора получается аккуратным.
#typography
Medium
Пунктуация на упаковке Яндекса
Снова о современной русской пунктуации. Давайте внимательно посмотрим, как набран текст на упаковке умной розетки Яндекса.
Тимофей Контанистов (в фамилии опечаток нет) написал об использовании Яндекс Толоки для тестирования интерфейсов.
— Когда дизайнер несколько недель подряд работает над одним и тем же макетом, у него замыливается глаз;
— Иногда сложно выбрать один вариант дизайна, а проводить всё через AБ-тестирование — долго и дорого;
— Практически нет инструментов для анализа результатов Толоки, сортировать и оценивать ответы приходится вручную. Нужны навыки работы с таблицам;
— С другой стороны, нет ограничения по типу заданий. Пользователям можно предложить всё: от сравнения двух текстов до похода в магазин и проведения контрольной закупки;
— Не подходит для тестов в узких сферах. У сервиса широкая целевая аудитория, на которой удобно проверять массовые продукты и сервисы;
— Можно сочетать с другими сервисами. UsabilityHub даёт классные возможности по аналитике, но аудитория там англоязычная, а тесты — дорогие. Можно создать тест в бесплатной версии UsabilityHub, а через Толоку привести туда пользователей;
— Четыре вида тестов на Толоке: 1) side-by-side, сравнение двух вариантов, 2) first click, 3) five second test, что пользователь успевает увидеть и понять за несколько секунд, 4) тест на понятность;
— Перед запуском на большую аудиторию проверяйте понятность вопросов на небольшой аудитории;
— Есть пользователи, которые не вникают в задания. Для борьбы с ними можно: 1) использовать ловушки для читеров, 2) добавлять вопросы, на которые нельзя ответить не подумав, 3) собирать базу проверенных респондентов, 4) увеличивать количество респондентов;
— Проведение тестов прокачивает дизайнера: развивает критическое мышление, учит задавать больше вопросов и не принимать первое решение как единственно верное.
#user_testing
— Когда дизайнер несколько недель подряд работает над одним и тем же макетом, у него замыливается глаз;
— Иногда сложно выбрать один вариант дизайна, а проводить всё через AБ-тестирование — долго и дорого;
— Практически нет инструментов для анализа результатов Толоки, сортировать и оценивать ответы приходится вручную. Нужны навыки работы с таблицам;
— С другой стороны, нет ограничения по типу заданий. Пользователям можно предложить всё: от сравнения двух текстов до похода в магазин и проведения контрольной закупки;
— Не подходит для тестов в узких сферах. У сервиса широкая целевая аудитория, на которой удобно проверять массовые продукты и сервисы;
— Можно сочетать с другими сервисами. UsabilityHub даёт классные возможности по аналитике, но аудитория там англоязычная, а тесты — дорогие. Можно создать тест в бесплатной версии UsabilityHub, а через Толоку привести туда пользователей;
— Четыре вида тестов на Толоке: 1) side-by-side, сравнение двух вариантов, 2) first click, 3) five second test, что пользователь успевает увидеть и понять за несколько секунд, 4) тест на понятность;
— Перед запуском на большую аудиторию проверяйте понятность вопросов на небольшой аудитории;
— Есть пользователи, которые не вникают в задания. Для борьбы с ними можно: 1) использовать ловушки для читеров, 2) добавлять вопросы, на которые нельзя ответить не подумав, 3) собирать базу проверенных респондентов, 4) увеличивать количество респондентов;
— Проведение тестов прокачивает дизайнера: развивает критическое мышление, учит задавать больше вопросов и не принимать первое решение как единственно верное.
#user_testing
Forwarded from КНЛ
Главное событие, где все ждут инноваций — презентации Apple. Но самая важная преза случилась еще до Apple, в 1968 году (ее так и назвали: «The Mother of All Demos»).
Там произошло то, что сделало интерфейс компьютера таким, какой он сейчас.
Дуглас Энгельбарт впервые показал всё наше родное добро: мышку, окна, ссылки, навигацию, работу с текстовым документом, механику copy/paste, drag&drop… Более того, он показал real-time коллаборацию аля Figma, и даже ВИДЕО-ЗВОНКИ (алло, 1968 год). Чувак на кучу лет опережал своё время.
На минуточку: первые домашние ПК появились только через 15 лет.
Благодаря Энгельбарту появилась идея того, что компьютер это не просто гигантский калькулятор. Он может быть инструментом для повседневных человеческих задач и хранения знаний. После «The Mother of All Demos» те концепции продолжили развивать Xerox, Apple и Microsoft.
Наверное, это самое важное демо в истории компьютеров. А Энгельбарт — одна из ключевых персон в HCI.
Поглядеть можно тут: полная версия, короткая версия.
Там произошло то, что сделало интерфейс компьютера таким, какой он сейчас.
Дуглас Энгельбарт впервые показал всё наше родное добро: мышку, окна, ссылки, навигацию, работу с текстовым документом, механику copy/paste, drag&drop… Более того, он показал real-time коллаборацию аля Figma, и даже ВИДЕО-ЗВОНКИ (алло, 1968 год). Чувак на кучу лет опережал своё время.
На минуточку: первые домашние ПК появились только через 15 лет.
Благодаря Энгельбарту появилась идея того, что компьютер это не просто гигантский калькулятор. Он может быть инструментом для повседневных человеческих задач и хранения знаний. После «The Mother of All Demos» те концепции продолжили развивать Xerox, Apple и Microsoft.
Наверное, это самое важное демо в истории компьютеров. А Энгельбарт — одна из ключевых персон в HCI.
Поглядеть можно тут: полная версия, короткая версия.
В Sparkbox написали о мобильной навигации по большим контентным сайтам [English].
— Иконку бургера стоит подписывать «Меню», если у сайта широкая аудитория с разным опытом и культурными особенностями;
— В главном меню разделяйте основные и второстепенные пункты визуально. Пункты (например, в меню второго уровня) можно группировать с помощью заголовков;
— Дайте возможность раскрыть несколько подменю одновременно. Отображайте иконки раскрытия и скрытия;
— Если навигация по дочерним страницам отображается на родительской, проверяйте, насколько она заметна и понятна пользователям (они склонны уходить в главное меню);
— В меню выделяйте страницу, на которой пользователь находится. На мобильных устройствах меню закрывает текущую страницу, пользователь теряет контекст и может выбрать её повторно (и расстроиться);
— Хлебные крошки помогают понять, где в структуре расположена текущая страница;
— Если ссылка или пункт меню ведёт на другой сайт с отличающейся навигацией, добавьте такой идентификатор. Открытие такого сайта в новой вкладке на мобильных устройствах сбивает с толку;
— Люди могут вообще не пользоваться вашей навигацией и идти через поисковые системы. Изучите, как люди ищут опубликованную вами информацию (какие слова используют и так далее), и оптимизируйте содержимое и метаданные страниц.
Так себе перевод со слетевшими картинками. #navigation
— Иконку бургера стоит подписывать «Меню», если у сайта широкая аудитория с разным опытом и культурными особенностями;
— В главном меню разделяйте основные и второстепенные пункты визуально. Пункты (например, в меню второго уровня) можно группировать с помощью заголовков;
— Дайте возможность раскрыть несколько подменю одновременно. Отображайте иконки раскрытия и скрытия;
— Если навигация по дочерним страницам отображается на родительской, проверяйте, насколько она заметна и понятна пользователям (они склонны уходить в главное меню);
— В меню выделяйте страницу, на которой пользователь находится. На мобильных устройствах меню закрывает текущую страницу, пользователь теряет контекст и может выбрать её повторно (и расстроиться);
— Хлебные крошки помогают понять, где в структуре расположена текущая страница;
— Если ссылка или пункт меню ведёт на другой сайт с отличающейся навигацией, добавьте такой идентификатор. Открытие такого сайта в новой вкладке на мобильных устройствах сбивает с толку;
— Люди могут вообще не пользоваться вашей навигацией и идти через поисковые системы. Изучите, как люди ищут опубликованную вами информацию (какие слова используют и так далее), и оптимизируйте содержимое и метаданные страниц.
Так себе перевод со слетевшими картинками. #navigation
Sparkbox
Website Navigation Design Best Practices for Content Rich Websites
Sparkbox evaluated and usability tested top content-rich websites to determine navigation UX best practices. Learn the 5 keys to designing effective mobile navigation.
Александр Чудеснов написал, как сделать доступным продукт из множества приложений, которые написаны разными командами.
— Страница с правильной цветовой контрастностью, структурой заголовков и HTML-вёрсткой, скорее всего, уже отвечает критериям доступности;
— Есть нюансы: разная реализация некоторых функций в разных браузерах, отдельные неудобные элементы вроде нативного поля ввода даты;
— Проблема в том, что Single Page Applications выходят за рамки возможностей HTML. В них много компонентов, которые не предоставляет сам браузер. При их создании надо отвечать на множество вопросов о взаимодействии с помощью клавиатуры, разметке для скринридеров, управлении фокусом;
— Дизайн-система не всегда спасает: проработанный компонент из ДС может не подходить продукту и не использоваться;
— Относитесь к ДС как к продукту: собирайте статистику использования и обратную связь, отслеживайте и исправляйте проблемы;
— ДС должна решать проблемы команд, предоставлять компоненты с разумными дефолтами, которые можно менять в определённых рамках. Без инструкций в формате «собери сам»;
— Есть проблема в совмещении визуальных и интерактивных паттернов. Кроме визуального стиля компонента важно прорабатывать способы взаимодействия с ним и возможную композицию с другими элементами;
— ДС может содержать визуальный слой, слой интерактивных паттернов и отдельно — собранные готовые компоненты (как в ДС Adobe Spectrum);
— Не пренебрегайте автоматическим тестированием. Тестировать компоненты в разных состояниях проще в Storybook, чем в продакшене. После ручного аудита (в Lighthouse или axe DevTools) стоит написать автоматизированные тесты (axe-Selenium);
— Важно, чтобы доступность интерфейсов стала частью культуры компании: помогите сформировать запрос на доступность, зовите на тестирование людей с инвалидностью, дайте сотрудникам возможность научиться создавать доступные продукты, установить цели, связанные в том числе и с процессами («80% команд знают и используют принципы обеспечения доступности»).
#accessibility
— Страница с правильной цветовой контрастностью, структурой заголовков и HTML-вёрсткой, скорее всего, уже отвечает критериям доступности;
— Есть нюансы: разная реализация некоторых функций в разных браузерах, отдельные неудобные элементы вроде нативного поля ввода даты;
— Проблема в том, что Single Page Applications выходят за рамки возможностей HTML. В них много компонентов, которые не предоставляет сам браузер. При их создании надо отвечать на множество вопросов о взаимодействии с помощью клавиатуры, разметке для скринридеров, управлении фокусом;
— Дизайн-система не всегда спасает: проработанный компонент из ДС может не подходить продукту и не использоваться;
— Относитесь к ДС как к продукту: собирайте статистику использования и обратную связь, отслеживайте и исправляйте проблемы;
— ДС должна решать проблемы команд, предоставлять компоненты с разумными дефолтами, которые можно менять в определённых рамках. Без инструкций в формате «собери сам»;
— Есть проблема в совмещении визуальных и интерактивных паттернов. Кроме визуального стиля компонента важно прорабатывать способы взаимодействия с ним и возможную композицию с другими элементами;
— ДС может содержать визуальный слой, слой интерактивных паттернов и отдельно — собранные готовые компоненты (как в ДС Adobe Spectrum);
— Не пренебрегайте автоматическим тестированием. Тестировать компоненты в разных состояниях проще в Storybook, чем в продакшене. После ручного аудита (в Lighthouse или axe DevTools) стоит написать автоматизированные тесты (axe-Selenium);
— Важно, чтобы доступность интерфейсов стала частью культуры компании: помогите сформировать запрос на доступность, зовите на тестирование людей с инвалидностью, дайте сотрудникам возможность научиться создавать доступные продукты, установить цели, связанные в том числе и с процессами («80% команд знают и используют принципы обеспечения доступности»).
#accessibility
Хабр
Как сделать большой продукт доступным
Примечание: Хабр не поддерживает указание альтернативного текста у картинок отдельно от видимой подписи, поэтому подписи длинные, не пугайтесь. Символ инклюзивного дизайна, вплетенный в структуру,...
Майкл Виллар написал о скролбарах.
— Их стиль и поведение отличается для разных операционных систем, браузеров и устройств прокрутки: мыши с колёсиком, Magic Mouse, трекпада. Например, скролбар в macOS может ездить по отдельной видимой дорожке (мышь с колёсиком) или просто поверх контента (трекпад и Magic Mouse);
— Для второго случая следует предусматривать дополнительный отступ справа, чтобы скролбар не закрывал контент;
— Кастомные скролбары помогают сохранять консистентность продукта на разных платформах и не перегружать интерфейс видимыми дорожками;
— Скрытые скролбары, которые отображаются после начала прокрутки, затрудняют обнаружение скрытого контента. Также сложно нажать на сам скролбар — он быстро исчезает после окончания прокрутки;
— В Height скролбар отображается при наведении курсора на блок с прокруткой;
— Кастомные скролбары дают полный контроль над тем, когда их отображать. Например, на канбан-досках имеет смысл показывать скролбары всегда, чтобы можно было быстро оценить количество задач в каждом столбце;
— VSCode на видимой дорожке отображает места, где на странице находятся результаты поиска.
In English. #scrollbar
— Их стиль и поведение отличается для разных операционных систем, браузеров и устройств прокрутки: мыши с колёсиком, Magic Mouse, трекпада. Например, скролбар в macOS может ездить по отдельной видимой дорожке (мышь с колёсиком) или просто поверх контента (трекпад и Magic Mouse);
— Для второго случая следует предусматривать дополнительный отступ справа, чтобы скролбар не закрывал контент;
— Кастомные скролбары помогают сохранять консистентность продукта на разных платформах и не перегружать интерфейс видимыми дорожками;
— Скрытые скролбары, которые отображаются после начала прокрутки, затрудняют обнаружение скрытого контента. Также сложно нажать на сам скролбар — он быстро исчезает после окончания прокрутки;
— В Height скролбар отображается при наведении курсора на блок с прокруткой;
— Кастомные скролбары дают полный контроль над тем, когда их отображать. Например, на канбан-досках имеет смысл показывать скролбары всегда, чтобы можно было быстро оценить количество задач в каждом столбце;
— VSCode на видимой дорожке отображает места, где на странице находятся результаты поиска.
In English. #scrollbar
UXPUB 🇺🇦 Дизайн-спільнота
Кастомные и нативные скроллбары в веб-приложениях
Подобно контекстным меню, скроллбары (полосы прокрутки) настолько распространены, что пользователи,...
Кэтрин Тотц написала об отображении цен и скидок на странице товара.
— Цена — одна из самых важных характеристик товара, влияющая на решение о покупке;
— Цена не должна теряться на фоне других элементов страницы. Очевидный совет, но посмотрите в статье примеры сайтов, на которых цены найти весьма непросто (Adidas, Patagonia);
— Стоит учесть, что пользователи просматривают каталог и страницы товаров быстро, а цена (в долларах особенно) может быть довольно коротким текстом;
— Если пользователь не увидит цены, он может посчитать, что магазин намеренно скрывает важную информацию. Появится недоверие;
— Хороший вариант отображения скидки: новая цена и зачёркнутая старая;
— Отображайте скидки, описания спецпредложений и иконки с метафорами скидки рядом с ценой. Пользователи могут не понять, что предложения и скидки относятся к товару, который они изучают, или даже полностью их проигнорировать;
— Неудобно, когда безусловная скидка на товар отображается только в корзине;
— Не стоит писать об одном и том же спецпредложении несколько раз. Люди начинают путаться в том, что же они получат в итоге;
— Если о спецпредложении надо рассказать на странице несколько раз, его описания должны быть одинаковыми (или почти), чтобы пользователь понял, что это одно и то же;
— Стоит отображать размер скидки: в абсолютном выражении и в процентном. Если места хватает только для одного варианта, выбирайте тот, где цифры получаются больше. Если скидка 20→15 долларов, то лучше написать, что скидка 25%. Если 1000→900, то лучше скидка $100.
In English. #price #ecommerce
— Цена — одна из самых важных характеристик товара, влияющая на решение о покупке;
— Цена не должна теряться на фоне других элементов страницы. Очевидный совет, но посмотрите в статье примеры сайтов, на которых цены найти весьма непросто (Adidas, Patagonia);
— Стоит учесть, что пользователи просматривают каталог и страницы товаров быстро, а цена (в долларах особенно) может быть довольно коротким текстом;
— Если пользователь не увидит цены, он может посчитать, что магазин намеренно скрывает важную информацию. Появится недоверие;
— Хороший вариант отображения скидки: новая цена и зачёркнутая старая;
— Отображайте скидки, описания спецпредложений и иконки с метафорами скидки рядом с ценой. Пользователи могут не понять, что предложения и скидки относятся к товару, который они изучают, или даже полностью их проигнорировать;
— Неудобно, когда безусловная скидка на товар отображается только в корзине;
— Не стоит писать об одном и том же спецпредложении несколько раз. Люди начинают путаться в том, что же они получат в итоге;
— Если о спецпредложении надо рассказать на странице несколько раз, его описания должны быть одинаковыми (или почти), чтобы пользователь понял, что это одно и то же;
— Стоит отображать размер скидки: в абсолютном выражении и в процентном. Если места хватает только для одного варианта, выбирайте тот, где цифры получаются больше. Если скидка 20→15 долларов, то лучше написать, что скидка 25%. Если 1000→900, то лучше скидка $100.
In English. #price #ecommerce
www.uprock.ru
4 ошибки, которые совершают интернет-магазины при отображении скидок на странице товара
Независимый институт UX исследований Baymard провел крупномасштабное тестирование интернет-магазинов. Оно выявило 4 ошибки, которые совершают более 18% сайтов электронной коммерции при проектировании цен и скидок на странице товара.
Станислав Хрусталёв написал о лучших практиках работы с корзиной.
— После добавления товара в корзину кнопка должна менять свой вид, показывая, что товар добавлен. Лучше обойтись микроанимацией кнопки. Анимация улетающего в корзину товара может быть неуместной;
— Если товары обычно покупают по одной штуке, кнопку добавления можно заменить на кнопку перехода в корзину;
— Дайте возможность удалить товар из корзины, не переходя в неё;
— Если у вас хорошо запоминающиеся пакеты для товаров (ЦУМ), можно стилизовать иконку корзины в шапке под такой пакет. В остальных случаях выбирайте стандартную метафору корзины;
— Не отображайте рядом с иконкой корзины бейдж с нулём. Бейдж привлекает внимание, которое не требуется, если в корзине пусто;
— В корзине можно ненавязчиво рассказать о следующих шагах, например, что дата и стоимость доставки станут известны при оформлении заказа;
— Полезная функция: очистить корзину;
— Если свободное место позволяет, в корзине можно разместить список преимуществ магазина;
— Если в покупке обычно участвуют несколько людей (Сантехника онлайн), полезной будет возможность поделиться корзиной;
— В пустой корзине можно разместить призыв к действию, ссылки на каталог и главную, на авторизацию (возможно, товары у пользователя в корзине есть, просто он не вошёл), кнопки активации поиска, добавления товаров из последнего заказа;
— Дайте возможность отложить выбранные товары или заказать часть того, что есть в корзине;
— При нажатии на товар лучше открывать его страницу в новой вкладке, чтобы не уводить пользователя из корзины.
— Интересная возможность: группировка товаров по категориям (Утконос), по наличию, чтобы быстро сориентироваться, что надо заменить;
— Не стоит акцентировать поле для ввода промокода, чтобы не побуждать пользователя прерывать заказ и отправляться на поиски кода.
#cart #ecommerce
— После добавления товара в корзину кнопка должна менять свой вид, показывая, что товар добавлен. Лучше обойтись микроанимацией кнопки. Анимация улетающего в корзину товара может быть неуместной;
— Если товары обычно покупают по одной штуке, кнопку добавления можно заменить на кнопку перехода в корзину;
— Дайте возможность удалить товар из корзины, не переходя в неё;
— Если у вас хорошо запоминающиеся пакеты для товаров (ЦУМ), можно стилизовать иконку корзины в шапке под такой пакет. В остальных случаях выбирайте стандартную метафору корзины;
— Не отображайте рядом с иконкой корзины бейдж с нулём. Бейдж привлекает внимание, которое не требуется, если в корзине пусто;
— В корзине можно ненавязчиво рассказать о следующих шагах, например, что дата и стоимость доставки станут известны при оформлении заказа;
— Полезная функция: очистить корзину;
— Если свободное место позволяет, в корзине можно разместить список преимуществ магазина;
— Если в покупке обычно участвуют несколько людей (Сантехника онлайн), полезной будет возможность поделиться корзиной;
— В пустой корзине можно разместить призыв к действию, ссылки на каталог и главную, на авторизацию (возможно, товары у пользователя в корзине есть, просто он не вошёл), кнопки активации поиска, добавления товаров из последнего заказа;
— Дайте возможность отложить выбранные товары или заказать часть того, что есть в корзине;
— При нажатии на товар лучше открывать его страницу в новой вкладке, чтобы не уводить пользователя из корзины.
— Интересная возможность: группировка товаров по категориям (Утконос), по наличию, чтобы быстро сориентироваться, что надо заменить;
— Не стоит акцентировать поле для ввода промокода, чтобы не побуждать пользователя прерывать заказ и отправляться на поиски кода.
#cart #ecommerce
Hardclient
Работа с корзиной в интернет-магазине: 203 гайдлайна
Лучшие практики UX/UI в E-Commerce
Роман Местер написал о коридорном тесте.
— Он помогает найти мешающие пользователям ошибки дизайна и неучтённые сценарии, узнать, как пользователи воспринимают дизайн;
— Не позволяет определить, какой вариант дизайна лучше;
— Прототип может быть линейным. Подходит для проверки онбординга, простых фич без сложного взаимодействия;
— Нелинейный прототип имитирует полноценное взаимодействие с интерфейсом. Подходит для тестирования навигации, работы фильтров, сценария (или даже нескольких) и взаимодействия с продуктом в целом;
— Чем реалистичнее прототип, тем больше инсайтов можно получить;
— В начале теста надо задать контекст (рассказать легенду), но не стоит говорить, что именно вы тестируете;
— Обычно достаточно 3–5 тестов, чтобы выявить основные проблемы;
— Спрашивайте респондента: что он видит (станет понятно, как он воспринимает интерфейс и понимает ли, где находится), что понимает, что хочет сделать (чтобы избежать беспорядочного кликания на всё подряд).
#user_testing
— Он помогает найти мешающие пользователям ошибки дизайна и неучтённые сценарии, узнать, как пользователи воспринимают дизайн;
— Не позволяет определить, какой вариант дизайна лучше;
— Прототип может быть линейным. Подходит для проверки онбординга, простых фич без сложного взаимодействия;
— Нелинейный прототип имитирует полноценное взаимодействие с интерфейсом. Подходит для тестирования навигации, работы фильтров, сценария (или даже нескольких) и взаимодействия с продуктом в целом;
— Чем реалистичнее прототип, тем больше инсайтов можно получить;
— В начале теста надо задать контекст (рассказать легенду), но не стоит говорить, что именно вы тестируете;
— Обычно достаточно 3–5 тестов, чтобы выявить основные проблемы;
— Спрашивайте респондента: что он видит (станет понятно, как он воспринимает интерфейс и понимает ли, где находится), что понимает, что хочет сделать (чтобы избежать беспорядочного кликания на всё подряд).
#user_testing
vc.ru
Самый простой способ проверить дизайн — Дизайн на vc.ru
Для чего подходит такой вариант? Чтобы найти очевидные ошибки дизайна, которые мешают пользователям, посмотреть на неучтенные сценарии и как пользователи понимают ваш интерфейс.Не подходит, чтобы определить, какой вариант дизайна лучше, так как это весьма…
Павел Шерер описал идеальную схему регистрации (через электронную почту и соцсети), логина и восстановления пароля.
Например, в ней учтены:
— Временные профили, у которых не подтверждены адреса электронной почты;
— Ограничение срока действия ссылки для подтверждения профиля;
— Ситуация, когда соцсеть при регистрации не сообщила почту пользователя;
— Объединение профилей при регистрации и логине через разные соцсети;
— Восстановление пароля, если пользователь регистрировался через соцсеть;
— Деактивация ссылки на восстановление пароля после того, как пользователь восстановил пароль по этой ссылке;
— Автоматический вход в профиль после перехода по ссылке для восстановления пароля;
— Возвращение пользователя после авторизации на страницу, с которой он перешёл к авторизации;
— Подсказка о том, через какую соцсеть пользователь входил раньше.
«Кто из нас не сталкивался с тем, что тупит перед формой входа, не помня, как именно он регался на этом сервисе: через почту или какую-то из соцсетей? И таких примеров тьма. Но самое грустное в том, что мы сами считаем это нормой, и чаще всего виним себя и свою забывчивость, тогда как чаще всего виноват в этом именно сервис».
#sign_up #log_in
Например, в ней учтены:
— Временные профили, у которых не подтверждены адреса электронной почты;
— Ограничение срока действия ссылки для подтверждения профиля;
— Ситуация, когда соцсеть при регистрации не сообщила почту пользователя;
— Объединение профилей при регистрации и логине через разные соцсети;
— Восстановление пароля, если пользователь регистрировался через соцсеть;
— Деактивация ссылки на восстановление пароля после того, как пользователь восстановил пароль по этой ссылке;
— Автоматический вход в профиль после перехода по ссылке для восстановления пароля;
— Возвращение пользователя после авторизации на страницу, с которой он перешёл к авторизации;
— Подсказка о том, через какую соцсеть пользователь входил раньше.
«Кто из нас не сталкивался с тем, что тупит перед формой входа, не помня, как именно он регался на этом сервисе: через почту или какую-то из соцсетей? И таких примеров тьма. Но самое грустное в том, что мы сами считаем это нормой, и чаще всего виним себя и свою забывчивость, тогда как чаще всего виноват в этом именно сервис».
#sign_up #log_in
vc.ru
Инструкция: как написать идеальную регистрацию — Разработка на vc.ru
Pavel Sherer Разработка10.09.2020
Мария Нижегородова написала об особенностях работы со специфичными респондентами: дворовый парень, VIP, провинциал, эксперт и продвинутый.
— Чем удивляет дворовый парень: часто интуитивно понимает наиболее важные для себя функции и обладает телефоном-флагманом (вопрос престижа);
— Чем помогает: не стесняется критиковать продукт, при должном доверии может подсказать схемы, как что-то сделать супервыгодно для себя;
— Чем удивляет VIP: благожелательностью и уважением к исследователю; тем, что иногда можно расслабиться и использовать сложную лексику. Если исследователь сможет наладить контакт, изначально выделенные 15 минут на интервью могут перерасти в 1,5 часа с отменой других встреч;
— Чем помогает: комментариями по существу и выстроенной аргументацией, вниманием к деталям. Одно продуктивное интервью может принести много инсайтов;
— Чем удивляет провинциал: моделью смартфона, качеством локального интернета, сердечностью и искренностью;
— Чем помогает: проверкой продукта на любом продукте с любым интернетом, проверкой текста (берегите редактора, чей текст её пройдёт);
— Чем удивляет эксперт: неожиданным взглядом на проблему и рынок, внезапным прогнозом. Но не всегда;
— Чем помогает: становится источником принципиально новой для компании информации, помогает обобщениями, сравнительным анализом и мультидисциплинарным подходом;
— Чем удивляет продвинутый: эмоциональной вовлечённостью в продукт, которой иногда не хватает участникам команды, вниманием к деталям и творческим использованием продукта;
— Чем помогает: подсвечивает реальные и воспринимаемые ошибки, обозначает опережающие рынок потребности.
#interview
— Чем удивляет дворовый парень: часто интуитивно понимает наиболее важные для себя функции и обладает телефоном-флагманом (вопрос престижа);
— Чем помогает: не стесняется критиковать продукт, при должном доверии может подсказать схемы, как что-то сделать супервыгодно для себя;
— Чем удивляет VIP: благожелательностью и уважением к исследователю; тем, что иногда можно расслабиться и использовать сложную лексику. Если исследователь сможет наладить контакт, изначально выделенные 15 минут на интервью могут перерасти в 1,5 часа с отменой других встреч;
— Чем помогает: комментариями по существу и выстроенной аргументацией, вниманием к деталям. Одно продуктивное интервью может принести много инсайтов;
— Чем удивляет провинциал: моделью смартфона, качеством локального интернета, сердечностью и искренностью;
— Чем помогает: проверкой продукта на любом продукте с любым интернетом, проверкой текста (берегите редактора, чей текст её пройдёт);
— Чем удивляет эксперт: неожиданным взглядом на проблему и рынок, внезапным прогнозом. Но не всегда;
— Чем помогает: становится источником принципиально новой для компании информации, помогает обобщениями, сравнительным анализом и мультидисциплинарным подходом;
— Чем удивляет продвинутый: эмоциональной вовлечённостью в продукт, которой иногда не хватает участникам команды, вниманием к деталям и творческим использованием продукта;
— Чем помогает: подсвечивает реальные и воспринимаемые ошибки, обозначает опережающие рынок потребности.
#interview
Хабр
“На Usability-тестах с дворовым парнем” и другие истории о специфике модерации отдельных групп респондентов
Привет, Хабр! Меня зовут Мария Нижегородова, я работаю в отделе исследования клиентского опыта ПСБ. В этой статье я собрала актуальные вопросы про особые категории респондентов на UX-исследованиях в...
Павел Григорьев написал об ошибках при создании дизайн-системы.
— Все макеты рисовали под основное разрешение (была статистика), для других разрешений прорабатывали только типовые страницы. Элементы для этих разрешений появлялись в ДС вне контекста, без примерки на реальных экранных формах. Местами поплыли пропорции, часть элементов забыли;
— На основное разрешение не всегда можно ориентироваться: пользователи иногда работают в окнах не на весь экран, увеличивают масштаб в браузере, производители ноутбуков иногда по умолчанию увеличивают системный масштаб, чтобы интерфейс не был слишком мелким;
— Подход с целевыми разрешениями себя не оправдал. Надо закладывать ресурсы на проработку экранных форм, элементов ДС и UI-кита под разные разрешения;
— Сложные модули лучше делать более гибкими, чтобы проще было их изменить (в первую очередь с точки зрения кода), так как для таких модулей сложно всё предусмотреть с самого начала;
— Набора элементов недостаточно, нужны инструкции по их правильному использованию, примеры и шаблоны с лучшими практиками;
— В шаблонах и описаниях должно быть однозначно понятно, как использовать элемент, и они должны быть привязаны к реальным примерам использования.
#design_system
— Все макеты рисовали под основное разрешение (была статистика), для других разрешений прорабатывали только типовые страницы. Элементы для этих разрешений появлялись в ДС вне контекста, без примерки на реальных экранных формах. Местами поплыли пропорции, часть элементов забыли;
— На основное разрешение не всегда можно ориентироваться: пользователи иногда работают в окнах не на весь экран, увеличивают масштаб в браузере, производители ноутбуков иногда по умолчанию увеличивают системный масштаб, чтобы интерфейс не был слишком мелким;
— Подход с целевыми разрешениями себя не оправдал. Надо закладывать ресурсы на проработку экранных форм, элементов ДС и UI-кита под разные разрешения;
— Сложные модули лучше делать более гибкими, чтобы проще было их изменить (в первую очередь с точки зрения кода), так как для таких модулей сложно всё предусмотреть с самого начала;
— Набора элементов недостаточно, нужны инструкции по их правильному использованию, примеры и шаблоны с лучшими практиками;
— В шаблонах и описаниях должно быть однозначно понятно, как использовать элемент, и они должны быть привязаны к реальным примерам использования.
#design_system
Хабр
Дизайн-система: что пошло не так и как мы это исправили
Привет! Я — Павел Григорьев, ведущий дизайнер интерфейсов в Мир Plat.Form. Я принимал участие в создании дизайн-системы, про которую с позиции разработчика рассказывала моя коллега Лера Егорова вот...
Дэмиен Ньюман в 2002-м нарисовал популярную схему, иллюстрирующую дизайн-процесс.
— Создание дизайн-решения происходит в три этапа: 1) research, погружение в задачу и изучение возможностей по её решению, 2) concept, формирование концепции, которая помогает перейти к проработке нюансов, 3) design, совершенствование концепции на основе обратной связи;
— Важно не пропускать этапы. Все три шага можно повторить;
— Почему такая визуализация: всё начинается с беспорядка и неопределённости и завершается в точке ясности завершённым дизайн-решением;
— Дизайн-решения притягивают клиентов больше, чем стоящий за ними процесс. Для многих это всё ещё некий единовременный акт превращения обыденных вещей в красивые, а не систематическая работа по поиску и развитию;
— «Загогулину» можно использовать бесплатно с указанием автора (в том числе и с коммерческой целью).
In English. #process
— Создание дизайн-решения происходит в три этапа: 1) research, погружение в задачу и изучение возможностей по её решению, 2) concept, формирование концепции, которая помогает перейти к проработке нюансов, 3) design, совершенствование концепции на основе обратной связи;
— Важно не пропускать этапы. Все три шага можно повторить;
— Почему такая визуализация: всё начинается с беспорядка и неопределённости и завершается в точке ясности завершённым дизайн-решением;
— Дизайн-решения притягивают клиентов больше, чем стоящий за ними процесс. Для многих это всё ещё некий единовременный акт превращения обыденных вещей в красивые, а не систематическая работа по поиску и развитию;
— «Загогулину» можно использовать бесплатно с указанием автора (в том числе и с коммерческой целью).
In English. #process
Андрей Яремко поделился мнением о разделении на UX и UI.
— UI — как выглядит интерфейс, его логика и опыт взаимодействия пользователя с этим интерфейсом;
— UX — вообще не про дизайн, а про деньги и степень ограничения пользователя;
— Разделение UX и UI излишне, одно без другого никому не нужно. В чём ценность дизайнера, который отвечает только за красоту, когда есть множество UI-китов, с которыми любой UX-дизайнер соберёт макет?
— Опыт взаимодействия с интерфейсом — это про удобство. Но это не то же, что опыт взаимодействия с продуктом. Последнее — про деньги и внедрение в продукт ограничений и неудобств;
— Если посмотреть патенты Match Group (Tinder) или Amazon, улучшение пользовательского опыта связано не с интерфейсом, а с искусственным интеллектом, сегментированием аудитории, логикой ранжирования и подбора товаров, новыми способами заработать;
— UX пересекается с UI, формируя для последнего требования к интерфейсу и логике работы системы. Например, хороший UX в онлайн-игре формируется не балансом или интерфейсом, а наличием системы региональных серверов, обеспечивающих хороший пинг;
— UX — баланс между ограничениями и неудобствами пользователя и оптимизацией доходов.
#definition
— UI — как выглядит интерфейс, его логика и опыт взаимодействия пользователя с этим интерфейсом;
— UX — вообще не про дизайн, а про деньги и степень ограничения пользователя;
— Разделение UX и UI излишне, одно без другого никому не нужно. В чём ценность дизайнера, который отвечает только за красоту, когда есть множество UI-китов, с которыми любой UX-дизайнер соберёт макет?
— Опыт взаимодействия с интерфейсом — это про удобство. Но это не то же, что опыт взаимодействия с продуктом. Последнее — про деньги и внедрение в продукт ограничений и неудобств;
— Если посмотреть патенты Match Group (Tinder) или Amazon, улучшение пользовательского опыта связано не с интерфейсом, а с искусственным интеллектом, сегментированием аудитории, логикой ранжирования и подбора товаров, новыми способами заработать;
— UX пересекается с UI, формируя для последнего требования к интерфейсу и логике работы системы. Например, хороший UX в онлайн-игре формируется не балансом или интерфейсом, а наличием системы региональных серверов, обеспечивающих хороший пинг;
— UX — баланс между ограничениями и неудобствами пользователя и оптимизацией доходов.
#definition
Хабр
Обесцененное понятие UI, недооцененное UX и избыточное IXD
18 лет в дизайне, 10 в менеджменте, 5 директорате, 2 в преподавании (дизайн, маркетинг, аналитика) и у меня есть пара ласковых для индустрии. Никаких домыслов, только официальные заявления,...
Игорь Кузнецов написал о 10 принципах Дитера Рамса.
— Некоторые принципы понятны, а некоторые требуют обдумывания. Игорь работает в сфере дизайна интерьеров и мебели, но его расшифровки могут быть полезны и дизайнерам интерфейсов;
— Хороший дизайн — инновационный, он развивается вместе с технологиями. Осваивайте новые технологии, чтобы двигаться вперёд;
— Удобен в использовании;
— Эстетичен. Красота субъективна, но есть классические принципы композиции, баланса. Плюс, со временем человек устремляется к большей простоте и осознанности;
— Делает продукт понятным для потребителя. Дизайн объясняет структуру продукта, помогает работать с ним без инструкции;
— Ненавязчив. Практичные визуально чистые предметы хорошо встают в разные интерьеры (см. видео Антона Шнайдера «Дизайн без дизайна»);
— Честен. Самый сложный в расшифровке принцип. Дизайн не должен завышать ожидания от продукта или манипулировать ими. Напишите в комментариях, как этот принцип понимаете вы?
— Актуален. Трендовый дизайн быстро устаревает. Крутой дизайн не создать, повторяя трендовые решения (только предугадывая). Он должен идти от сердца, веры в себя, увлечённости и удовольствия от своей работы;
— Продуман до каждой детали. Ничто не должно быть случайным или оставленным на волю случая;
— Экологичен. Способствует сохранению окружающей среды, минимизирует физическое и визуальное загрязнение на протяжении всего жизненного цикла продукта;
— Как можно меньше дизайна. Фокусируйтесь на главных аспектах и задачах продукта, не отягощайте его лишними функциями.
#heuristic
— Некоторые принципы понятны, а некоторые требуют обдумывания. Игорь работает в сфере дизайна интерьеров и мебели, но его расшифровки могут быть полезны и дизайнерам интерфейсов;
— Хороший дизайн — инновационный, он развивается вместе с технологиями. Осваивайте новые технологии, чтобы двигаться вперёд;
— Удобен в использовании;
— Эстетичен. Красота субъективна, но есть классические принципы композиции, баланса. Плюс, со временем человек устремляется к большей простоте и осознанности;
— Делает продукт понятным для потребителя. Дизайн объясняет структуру продукта, помогает работать с ним без инструкции;
— Ненавязчив. Практичные визуально чистые предметы хорошо встают в разные интерьеры (см. видео Антона Шнайдера «Дизайн без дизайна»);
— Честен. Самый сложный в расшифровке принцип. Дизайн не должен завышать ожидания от продукта или манипулировать ими. Напишите в комментариях, как этот принцип понимаете вы?
— Актуален. Трендовый дизайн быстро устаревает. Крутой дизайн не создать, повторяя трендовые решения (только предугадывая). Он должен идти от сердца, веры в себя, увлечённости и удовольствия от своей работы;
— Продуман до каждой детали. Ничто не должно быть случайным или оставленным на волю случая;
— Экологичен. Способствует сохранению окружающей среды, минимизирует физическое и визуальное загрязнение на протяжении всего жизненного цикла продукта;
— Как можно меньше дизайна. Фокусируйтесь на главных аспектах и задачах продукта, не отягощайте его лишними функциями.
#heuristic
vc.ru
Как проектировать крутые продукты? Моя расшифровка 10 принципов Дитера Рамса — Дизайн на vc.ru
Икея не работает, H&M и Юникло ушли, Декатлона больше нет. И это те компании, которые мы в семье по настоящему любим. Появится ли быстро отечественная замена? Могу точно сказать нет. Обратите внимание, ни одна из перечисленных выше компаний не была основана…
Фейфей Лиу написала о переключателях языка (страны, валюты) в интернет-магазинах.
— По умолчанию отображайте языковую версию, ориентируясь на настройки браузера и IP-адрес пользователя;
— Если так сделать проблематично, показывайте специальную страницу, на которой пользователь может выбрать регион и язык и перейти на региональный сайт (Zara);
— Размещайте переключатель в правом или левом верхнем углу на десктопных версиях сайтов (Asos), на мобильных — в верхней части (обычно занята более важной информацией) или в меню (Amcal+);
— Название языка пишите на том же языке, то есть вместо «Испанский» пишите «Español» (см. Airbnb и мобильный сайт Burberry);
— Если список вариантов стран и языков большой, в отдельном блоке можно отобразить предложения языка и страны для быстрого выбора: что часто выбирают или что соответствует настройкам браузера пользователя (Airbnb);
— Переключатель обозначайте сочетанием текста и иконок (флаг, символ валюты). Так его легче заметить и распознать, он подсказывает о возможности, например, выбрать валюту для оплаты (Selfridges);
— Флаг прямоугольной формы распознать проще, чем стилизованный круглый (Asos);
— Разрешите настраивать язык, страну и валюту независимо друг от друга (AliExpress).
In English. #localization #ecommerce
— По умолчанию отображайте языковую версию, ориентируясь на настройки браузера и IP-адрес пользователя;
— Если так сделать проблематично, показывайте специальную страницу, на которой пользователь может выбрать регион и язык и перейти на региональный сайт (Zara);
— Размещайте переключатель в правом или левом верхнем углу на десктопных версиях сайтов (Asos), на мобильных — в верхней части (обычно занята более важной информацией) или в меню (Amcal+);
— Название языка пишите на том же языке, то есть вместо «Испанский» пишите «Español» (см. Airbnb и мобильный сайт Burberry);
— Если список вариантов стран и языков большой, в отдельном блоке можно отобразить предложения языка и страны для быстрого выбора: что часто выбирают или что соответствует настройкам браузера пользователя (Airbnb);
— Переключатель обозначайте сочетанием текста и иконок (флаг, символ валюты). Так его легче заметить и распознать, он подсказывает о возможности, например, выбрать валюту для оплаты (Selfridges);
— Флаг прямоугольной формы распознать проще, чем стилизованный круглый (Asos);
— Разрешите настраивать язык, страну и валюту независимо друг от друга (AliExpress).
In English. #localization #ecommerce
www.uprock.ru
6 советов по улучшению переключателей языков на сайтах электронной коммерции — читайте на UPROCK
Функция переключения языков на сайтах электронной коммерции должна быть размещена в верхних углах экрана десктопной версии и в верхней части страницы на мобильных устройствах. Она должна обладать достаточной детализацией и гибкостью, чтобы отвечать потребностям…
Forwarded from VanillaTime
Вот и прошла наша вторая сессия критики с Артёмом и Илоной. Вместе разбирали сервисы по букингу жилья и выявили несколько интересных инсайтов, про которые хорошо бы помнить, если делаете что-то подобное.
1. Определитесь с наполняемостью вашего сервиса, прежде, чем переходить к сценариям: если вы ставите эффективность во главу, то смело стартуйте с карты и фильтров. А если у вас есть ещё какой-то другой контент, а-ля блог, аналитика, статьи, то придётся начинать с «разводящей» главной со всеми прелюдиями.
2. Во время поиска давайте возможность настроить сразу специальные фильтры, значимые для пользователя.
3. Пытайтесь работать с уже предоставленными данными: если пользователь укажет, сколько собак с ним едет, можно сразу проставить фильтр «Pets friendly».
4. Не зацикливайтесь на одном представлении календаря. Даже такой заезженный компонент можно сделать удобнее, например, избавившись от помесячного листания.
5. Попробуйте сохранять параметры поиска вашего пользователя в файлах cookie, так не придётся заново настраивать плеяду фильтров.
6. Не жадничайте, и вместо того, чтобы делать все объявления горящими, сделайте тройку-ротатор в самом начале поисковой выдачи. Если выделяете всё — не выделяете ничего.
7. Аналогичный совет касается давления на пользователя при помощи дефицита. «Спешите!», «Последний номер!», «Осталось всего 340 номеров!» — так вы только приобретаете репутацию торгаша.
8. На карточках объявлений отображайте цену в предзаданом формате, однако при этом оставляйте возможность посмотреть и другие валюты. Например, в хинте.
9. Рационально взвешивайте отношение полезного пространства к рекламе, которую всё равно кто-то всунет. Так лучше это будете вы и встроите её аккуратно, чтобы ничего нигде не треснуло.
10. Изменение вида отображения не должно влиять на примененные фильтры, за исключением карты, где объявления фильтруются по видимой части.
11. Кстати о карте. Не лепите все объявления в кучу, так по ним фиг попадёшь на отдалении. Но и убирать «неугодные» объявления тоже не стоит, ведь иначе пользователь просто может не узнать о том, что они существуют. Вместо этого, лучше стекать объявления в групповой пин с легендой.
12. Чтобы пользователь не сломал себе шею мотая головой от карты к листу объявлений, лучше открывать на карте поповер с листалкой объявлений в группе.
13. При этом нужно использовать именно поп-овер с закрытием по клику, а не ховер.
14. Карта может содержать не только объявления, но ещё и инфраструктуру: детские сады, школы, остановки, магазины и т.д.
15. На карте, да и в списке помечайте объявления, которые пользователь уже смотрел — это очень полезно для отсева.
16. Самая главная страница сервисов по аренде — страница объявления и относится к ней нужно соответствующе: не нужно лепить всё в одну большую мясорубку и впихивать в фолд невпихуемое. Вместо этого уделите время информационной архитектуре.
17. Люди покупают образы, потому не стесняйтесь эти образы рисовать при помощи больших фотографий и галлерей. Но не переборщите, иначе получится сток :)
18. Увеличивайте сканируемость сразу предоставляя доступ к списку «благ и особенностей» используя при этом информативные пиктограммы.
19. Если в гостинице есть несколько подходящих номеров, то позаботьтесь о простом и чистом их представлении: подсветите разницу, обозначьте цены и целевые действия, дабы пользователю не пришлось листать огроменные таблицы.
20. Оу, и последнее, если пользователь не может забронировать номер в отеле или снять квартиру, то не нужно её показывать. Так только раны солью покроете.
Если кто-то хочет посмотреть живые примеры, то милости просим в видео, всё там есть. На этот раз всего полтора часа — стараемся. В следующий раз точно уложимся в час… Наверное.
1. Определитесь с наполняемостью вашего сервиса, прежде, чем переходить к сценариям: если вы ставите эффективность во главу, то смело стартуйте с карты и фильтров. А если у вас есть ещё какой-то другой контент, а-ля блог, аналитика, статьи, то придётся начинать с «разводящей» главной со всеми прелюдиями.
2. Во время поиска давайте возможность настроить сразу специальные фильтры, значимые для пользователя.
3. Пытайтесь работать с уже предоставленными данными: если пользователь укажет, сколько собак с ним едет, можно сразу проставить фильтр «Pets friendly».
4. Не зацикливайтесь на одном представлении календаря. Даже такой заезженный компонент можно сделать удобнее, например, избавившись от помесячного листания.
5. Попробуйте сохранять параметры поиска вашего пользователя в файлах cookie, так не придётся заново настраивать плеяду фильтров.
6. Не жадничайте, и вместо того, чтобы делать все объявления горящими, сделайте тройку-ротатор в самом начале поисковой выдачи. Если выделяете всё — не выделяете ничего.
7. Аналогичный совет касается давления на пользователя при помощи дефицита. «Спешите!», «Последний номер!», «Осталось всего 340 номеров!» — так вы только приобретаете репутацию торгаша.
8. На карточках объявлений отображайте цену в предзаданом формате, однако при этом оставляйте возможность посмотреть и другие валюты. Например, в хинте.
9. Рационально взвешивайте отношение полезного пространства к рекламе, которую всё равно кто-то всунет. Так лучше это будете вы и встроите её аккуратно, чтобы ничего нигде не треснуло.
10. Изменение вида отображения не должно влиять на примененные фильтры, за исключением карты, где объявления фильтруются по видимой части.
11. Кстати о карте. Не лепите все объявления в кучу, так по ним фиг попадёшь на отдалении. Но и убирать «неугодные» объявления тоже не стоит, ведь иначе пользователь просто может не узнать о том, что они существуют. Вместо этого, лучше стекать объявления в групповой пин с легендой.
12. Чтобы пользователь не сломал себе шею мотая головой от карты к листу объявлений, лучше открывать на карте поповер с листалкой объявлений в группе.
13. При этом нужно использовать именно поп-овер с закрытием по клику, а не ховер.
14. Карта может содержать не только объявления, но ещё и инфраструктуру: детские сады, школы, остановки, магазины и т.д.
15. На карте, да и в списке помечайте объявления, которые пользователь уже смотрел — это очень полезно для отсева.
16. Самая главная страница сервисов по аренде — страница объявления и относится к ней нужно соответствующе: не нужно лепить всё в одну большую мясорубку и впихивать в фолд невпихуемое. Вместо этого уделите время информационной архитектуре.
17. Люди покупают образы, потому не стесняйтесь эти образы рисовать при помощи больших фотографий и галлерей. Но не переборщите, иначе получится сток :)
18. Увеличивайте сканируемость сразу предоставляя доступ к списку «благ и особенностей» используя при этом информативные пиктограммы.
19. Если в гостинице есть несколько подходящих номеров, то позаботьтесь о простом и чистом их представлении: подсветите разницу, обозначьте цены и целевые действия, дабы пользователю не пришлось листать огроменные таблицы.
20. Оу, и последнее, если пользователь не может забронировать номер в отеле или снять квартиру, то не нужно её показывать. Так только раны солью покроете.
Если кто-то хочет посмотреть живые примеры, то милости просим в видео, всё там есть. На этот раз всего полтора часа — стараемся. В следующий раз точно уложимся в час… Наверное.
YouTube
Сервисы по аренде жилья. AirBnb, Booking, Onliner, Realt, Cyan, Островок, Avito. Design Critique #2
Дизайнеры DesignSpot разбрали существующие решения для бронирования жилья.
В выпуске рассмотрены онлайн-сервисы Victim title, AirBnb, Booking, Onliner, Hata, Travel yandex, Google отели, Aurodas, Realt, MyHome, Onewotrip, Cyan, Островок, Avito
- Узнаем,…
В выпуске рассмотрены онлайн-сервисы Victim title, AirBnb, Booking, Onliner, Hata, Travel yandex, Google отели, Aurodas, Realt, MyHome, Onewotrip, Cyan, Островок, Avito
- Узнаем,…
Сергей Шандарин написал о поиске работы дизайнером за рубежом (после 24 февраля).
— Будьте готовы к более формальному и длинному процессу найма, чем в России. Самая быстрая компания сделала оффер через месяц после заявки. Компания, оффер которой Сергей принял, — через 7 недель;
— Как правило, проходит от 2 до 6 отборочных этапов;
— Итоговая конверсия из заявок в офферы — 4%;
— Во всех компаниях на интервью задают идентичные вопросы, имеет смысл отрепетировать ответы;
— Отказы на поздних этапах иногда содержат обратную связь («не хватило А, Б, В»), но бывает, она противоречит тому, что происходило во время звонка. Или комментариям другой команды. Обращайте внимание только на то, что упомянули несколько разных людей;
— Сергей не встретил негатива от собеседующих из Украины и стран Восточной Европы, но сложилось впечатление, что отказов на поздних этапах от таких команд было больше. Полезно узнавать о составе команды как можно раньше;
— Если переезжаешь, зарплату предлагают одинаковую: 80–90 тысяч евро в год в Европе и 90–120 тысяч евро в Великобритании. В большинстве компаний за релокацию предлагают 5% от зарплаты;
— Портфолио оформляйте в виде сайта. Разместите там а) красивые картинки сделанных проектов с кратким описанием вашего вклада и результатов или б) детальные разборы сделанных проектов. Их никто не читает, но они показывают, что вы умеете делать не только визуал;
— Всё должно быть переведено на английский, особенно макеты;
— Важнейший фактор отбора — есть ли у вас разрешение на работу в стране. Выясните заранее, насколько реально его получить. Сергею не ответил никто из США, так как не было рабочей визы и единственный в году розыгрыш виз уже прошёл;
— Если не принципиально, куда ехать, фокусируйтесь на странах с адекватными визовыми условиями. Если выбрали конкретную страну, сразу подавайте документы в консульство (для этого оффер на руках не требуется);
— Срок годности вакансии: от 1 до 3 дней с момента публикации. Потом откликов становится слишком много, и их перестают смотреть;
— В известных компаниях срок годности: от 1 до 3 часов. Постарайтесь найти сотрудника компании, который вас порекомендует;
— Компании, которые просят указать в заявке текущую или ожидаемую зарплату, обычно платят ниже рынка. Укажите честные цифры, чтобы они поняли, стоит ли начинать процесс;
— Рекрутёры отвечают в пределах 3–4 дней. Долгие ответы в самом начале — индикатор беспорядка в мелких и средних компаниях и бюрократии в крупных;
— Нанимающие судят не по качеству вашего дизайна, а по тому, насколько хорошо вы можете его презентовать. Это совершенно отдельный нарабатываемый навык;
— Сорсер — человек, который ищет специалистов под заданные требования (в них не разбираясь) и приглашает поговорить. Если вы сами откликаетесь на вакансии, говорить с ним не придётся;
— Перед звонком ваше резюме не будут внимательно читать. Все важные и интересные факты о себе стоит проговаривать при разговоре с новым человеком;
— Презентация — это готовая последовательность слайдов о проекте: от формулировки проблемы до полученных результатов;
— Тестовые задания не очень популярны. Их дали только 4 компании из 15, с которыми Сергей серьёзно общался;
— Важно не воспринимать их буквально. Если для решения, хорошего для пользователей и бизнеса, надо оспорить задачу, значит, аргументированно её оспаривайте;
— У нанимающих менеджеров можно поинтересоваться, чего ожидать от предстоящего разговора с топ-менеджером. Он обычно заинтересован, чтобы у вас всё получилось;
— Текущую или ожидаемую зарплату называть не стоит. Если рекрутёр настаивает, можно ответить, что в среднем по рынку такие специалисты получают X. Это даст пространство для манёвра в будущем;
— Лучшая компенсация — не всегда более высокая зарплата. Это может быть пакет акций, подписной бонус, удалённая работа, больше дней отпуска, более гибкий график. Предложенную компанией компенсацию почти всегда можно улучшить.
#career
— Будьте готовы к более формальному и длинному процессу найма, чем в России. Самая быстрая компания сделала оффер через месяц после заявки. Компания, оффер которой Сергей принял, — через 7 недель;
— Как правило, проходит от 2 до 6 отборочных этапов;
— Итоговая конверсия из заявок в офферы — 4%;
— Во всех компаниях на интервью задают идентичные вопросы, имеет смысл отрепетировать ответы;
— Отказы на поздних этапах иногда содержат обратную связь («не хватило А, Б, В»), но бывает, она противоречит тому, что происходило во время звонка. Или комментариям другой команды. Обращайте внимание только на то, что упомянули несколько разных людей;
— Сергей не встретил негатива от собеседующих из Украины и стран Восточной Европы, но сложилось впечатление, что отказов на поздних этапах от таких команд было больше. Полезно узнавать о составе команды как можно раньше;
— Если переезжаешь, зарплату предлагают одинаковую: 80–90 тысяч евро в год в Европе и 90–120 тысяч евро в Великобритании. В большинстве компаний за релокацию предлагают 5% от зарплаты;
— Портфолио оформляйте в виде сайта. Разместите там а) красивые картинки сделанных проектов с кратким описанием вашего вклада и результатов или б) детальные разборы сделанных проектов. Их никто не читает, но они показывают, что вы умеете делать не только визуал;
— Всё должно быть переведено на английский, особенно макеты;
— Важнейший фактор отбора — есть ли у вас разрешение на работу в стране. Выясните заранее, насколько реально его получить. Сергею не ответил никто из США, так как не было рабочей визы и единственный в году розыгрыш виз уже прошёл;
— Если не принципиально, куда ехать, фокусируйтесь на странах с адекватными визовыми условиями. Если выбрали конкретную страну, сразу подавайте документы в консульство (для этого оффер на руках не требуется);
— Срок годности вакансии: от 1 до 3 дней с момента публикации. Потом откликов становится слишком много, и их перестают смотреть;
— В известных компаниях срок годности: от 1 до 3 часов. Постарайтесь найти сотрудника компании, который вас порекомендует;
— Компании, которые просят указать в заявке текущую или ожидаемую зарплату, обычно платят ниже рынка. Укажите честные цифры, чтобы они поняли, стоит ли начинать процесс;
— Рекрутёры отвечают в пределах 3–4 дней. Долгие ответы в самом начале — индикатор беспорядка в мелких и средних компаниях и бюрократии в крупных;
— Нанимающие судят не по качеству вашего дизайна, а по тому, насколько хорошо вы можете его презентовать. Это совершенно отдельный нарабатываемый навык;
— Сорсер — человек, который ищет специалистов под заданные требования (в них не разбираясь) и приглашает поговорить. Если вы сами откликаетесь на вакансии, говорить с ним не придётся;
— Перед звонком ваше резюме не будут внимательно читать. Все важные и интересные факты о себе стоит проговаривать при разговоре с новым человеком;
— Презентация — это готовая последовательность слайдов о проекте: от формулировки проблемы до полученных результатов;
— Тестовые задания не очень популярны. Их дали только 4 компании из 15, с которыми Сергей серьёзно общался;
— Важно не воспринимать их буквально. Если для решения, хорошего для пользователей и бизнеса, надо оспорить задачу, значит, аргументированно её оспаривайте;
— У нанимающих менеджеров можно поинтересоваться, чего ожидать от предстоящего разговора с топ-менеджером. Он обычно заинтересован, чтобы у вас всё получилось;
— Текущую или ожидаемую зарплату называть не стоит. Если рекрутёр настаивает, можно ответить, что в среднем по рынку такие специалисты получают X. Это даст пространство для манёвра в будущем;
— Лучшая компенсация — не всегда более высокая зарплата. Это может быть пакет акций, подписной бонус, удалённая работа, больше дней отпуска, более гибкий график. Предложенную компанией компенсацию почти всегда можно улучшить.
#career
vc.ru
Как дизайнеру найти работу на Западе. Подробный разбор — Дизайн на vc.ru
Я продуктовый дизайнер. За последние 2 месяца я прошел 70 собеседований с разными западными компаниями и получил несколько весомых предложений о работе. В этой статье я расскажу, как проходил этот процесс и дам рекомендации относительно того, как дойти до…
Игорь Штанг написал, что делать с текстом в скобках (например).
— Скобки — парный знак препинания. Они больше шумят и занимают места, чем запятая или иной одинарный символ;
— «Аренда телеги (за час)» → «Аренда телеги, за час» или «Аренда телеги / за час»;
— Можно убрать знаки препинания и выделить текст кеглем, цветом или начертанием и таким образом создать визуальный слой. Скобки на такое не способны;
— Если примечаний много или они однотипные, их стоит сгруппировать в отдельной колонке или в другом отдельном блоке.
#typography
— Скобки — парный знак препинания. Они больше шумят и занимают места, чем запятая или иной одинарный символ;
— «Аренда телеги (за час)» → «Аренда телеги, за час» или «Аренда телеги / за час»;
— Можно убрать знаки препинания и выделить текст кеглем, цветом или начертанием и таким образом создать визуальный слой. Скобки на такое не способны;
— Если примечаний много или они однотипные, их стоит сгруппировать в отдельной колонке или в другом отдельном блоке.
#typography
Medium
Что делать со скобками
На «Большой переверстке» давал новую таблицу — прейскурант базы отдыха. В ней много текста в скобках, и оказались, что большинство ребят…
Forwarded from Кнопочка
Ироничные тексты повышают когнитивную нагрузку, но хорошо заходят шутникам
Получила пуш и вспомнила про исследование, которое недавно читала. Исследователи из Ноттингемского университета решили проверить, как люди воспринимают сарказм и иронию в тексте. Тест проводили с помощью айтрекинга — смотрели на фиксации взгляда при чтении.
Вот некоторые выводы
🔸 Людям сложнее считывать ироничные высказывания, чем нейтральные. Айтрекинг показал, что люди обычно перечитывают такой текст дважды. В первый раз воспринимая буквальный смысл фразы, а при повторном прочтении уже понимают иронию или сарказм.
🔸 Люди, которые в обычной жизни склонны шутить шутки, воспринимают саркастические высказывания легче: у них фиксаций было меньше.
🔸 Формулировки с отрицанием люди больше склонны воспринимать как саркастичные, чем утвердительные. Сарказм с «не» считывается проще.
То есть из вариантов: «он лучший учитель» и «он не самый лучший учитель» люди примут за сарказм второй, трактуя это как: он далекооо не самый лучший.
Получила пуш и вспомнила про исследование, которое недавно читала. Исследователи из Ноттингемского университета решили проверить, как люди воспринимают сарказм и иронию в тексте. Тест проводили с помощью айтрекинга — смотрели на фиксации взгляда при чтении.
Вот некоторые выводы
🔸 Людям сложнее считывать ироничные высказывания, чем нейтральные. Айтрекинг показал, что люди обычно перечитывают такой текст дважды. В первый раз воспринимая буквальный смысл фразы, а при повторном прочтении уже понимают иронию или сарказм.
🔸 Люди, которые в обычной жизни склонны шутить шутки, воспринимают саркастические высказывания легче: у них фиксаций было меньше.
🔸 Формулировки с отрицанием люди больше склонны воспринимать как саркастичные, чем утвердительные. Сарказм с «не» считывается проще.
То есть из вариантов: «он лучший учитель» и «он не самый лучший учитель» люди примут за сарказм второй, трактуя это как: он далекооо не самый лучший.