html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

9 простых советов, которые помогут спасти интерфейс

9 простых советов, которые помогут спасти интерфейс

Вряд ли в мире есть хоть один продукт, дизайнер которого не вспомнит за собой ни единого неверного решения. Обычно разработчики исправляют промахи в новых версиях и редизайнах, но бывает и так, что идея, которая изначально казалась ошибочной, начинает нравиться пользователям — они привыкают. Так было, например, с перезапуском Foursquare в 2014-м.

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

Подход: учитывайте уровень пользователя

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

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

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

Главная страница: минимум информации и ключевые кнопки

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

Случалось, мы игнорировали минимальную высоту экрана — и в итоге ключевые элементы оказывались «за бортом». Например, кнопка оплаты не попадала на главный экран. В таком случае значительно снижается вероятность успешного действия — некоторые пользователи эту кнопку попросту не находят. Как правило, проблему легко выявить, просматривая записи сессий и сравнивая данные по разным разрешениям в Google Analytics.

Пользователь оценивает новый для него сайт в среднем за пять секунд. Поэтому важно, чтобы на стартовой странице или первом экране была только главная информация и call to action. На примере — не только отсутствие кнопки с призывом, но и обилие лишней информации, которая путает посетителя сайта. Не делайте так.

Упрощаем регистрацию

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

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

  • Разбиваем регистрацию на несколько шагов и показываем список этих шагов пользователю.

  • На каждом этапе подробно объясняем, зачем нужна та или иная информация.

  • Перед регистрацией демонстрируем, какую пользу получит клиент. Сначала даём ценность и только затем требуем что-то взамен.

На примере ниже регистрационная форма запрашивает слишком много информации. Даже если все эти данные объективно нужны сервису, стоит разбить процесс на несколько шагов: создание аккаунта, редактирование профиля, данные для оформления заказов, дополнительная информация. При этом все шаги, кроме создания аккаунта, стоит сделать опциональными.

Поведение юзера: предупреждение ошибок вместо наказания

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

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

Навигация: ясность и предсказуемость

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

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

Ещё одна проблема в том, что кнопок в меню слишком много, и часть из них ведёт на сторонние ресурсы.

Как сделать иконки, которые будут понятны всем

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

Наглядная иллюстрация этого примера — редизайн Evernote образца 2014 года. В попытках облегчить дизайн создатели сформировали меню из одних только иконок. Удобство крайне сомнительно. Не надейтесь, что пользователь привыкнет к дизайну «на троечку» и разберётся с запутанным функционалом. В интернете всегда будет конкурент, которому не лень переделать кнопки, и клиенты вполне могут уйти к нему.

Последовательный интерфейс — прямая дорога к продажам

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

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

Пример ниже показывает, насколько легко испортить интерфейс в попытках изобрести велосипед. Кнопки «Да / Нет» или «Ок / Отмена» не должны запутывать посетителя.

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

Мобильные устройства: как не испортить дизайн приложения

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

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

  2. Слишком маленькая область нажатия. Хороший тон для любого активного элемента — область нажатия равна площади соприкосновения с пальцем.

  3. Неочевидное управление жестами. Новому пользователю не всегда очевиден функционал, который спрятан за жестами. Если ваше приложение поддерживает жесты, опишите взаимодействие с помощью подсказок.

Вместо итога: как проверить идею на жизнеспособность

Оценить перспективы идеи можно только на практике. Полагаться в этом вопросе исключительно на интуицию — плохое решение. Прежде чем внедрять новую «фишку» на сайте или в приложении, её необходимо протестировать. Но и тогда, когда решение уже реализовано в продукте, нужно отслеживать его эффективность с помощью Google Analytics и «Яндекс.Метрики».

Если выясните, что какие-то элементы дизайна мешают взаимодействию с продуктом, смело сносите, даже если они нравятся вам, генеральному директору и его маме. Комфорт пользователя — в приоритете.

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

Читать дальше
Twitter
Одноклассники
Мой Мир

материал с cossa.ru

3

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • cossa.ru
          • социальные сети
          • яндекс
          • иконки
          • подборка
          • домен cossa.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции