Исправляем ошибки в дизайне главной страницы сайта Bank of America

Аудио перевод статьи
0:00
0:00
·

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

Мои цели

Некоторые цели я определил сразу, другие — после исследования. Вот они:

  • упростить страницу и сделать ее удобнее,
  • доработать пользовательский интерфейс с учетом результатов UX-исследований,
  • попрактиковаться в UI-дизайне.

Кабинетное исследование

Для меня отличный интерфейс — это не просто красивый и современный дизайн. Важно, чтобы опыт взаимодействия с ним был приятным и удобным, ведь интерфейс разрабатывается не для дизайнера, а для пользователей.

Прежде чем приступить к выполнению задачи, я провел исследование, чтобы больше узнать о клиентах Bank of America. Согласно данным Statista его аудитория преимущественно состоит из людей в возрасте от 30 до 49 лет (30,86%), а клиенты в возрасте от 50 до 64 лет составляют 12,77% аудитории.

Результаты исследования 2018 года

На основе этих данных я сделал следующие выводы:

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

Найденные проблемы

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

Краткое руководство по стилю

1. Сетка

В дизайне были использованы 2 разные сетки на основе базовой 8-пиксельной сетки. Все расстояния кратны 8, благодаря чему интерфейс выглядит гармонично.

Первая сетка: 12 колонок, ширина колонки 72px, межколонное расстояние — 32px. Вторая сетка: ряды высотой 8px, расстояние между ними — 8px.

2. Типографика

Я остановил свой выбор на Inter, шрифте без засечек.

3. Цветовая палитра

Основу цветовой палитры составили цвета бренда и цвета, использованные на оригинальном сайте.

Вайрфреймы

1. Низкой детализации
2. Средней детализации

Результат

Заключение

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

Источник:
medium.com
·
comments powered by HyperComments