Основы редизайна веб-сайта — пример из практики

Нередко заканчивая проект по редизайну веб-сайта, оглянувшись назад, вы думаете: «Я бы поступил по-другому, если бы знал то, что знаю сегодня».

Мы все были там. Мы воодушевляемся новым проектом, подшучиваем над клиентом, подписываем контракты и начинаем макетировать прототипы. Жизнь выглядит хорошо, но основы проекта шатки.

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

Дизайн мирового класса и взаимодействие с пользователем не начинаются с красивого макета — они основаны на стратегическом планировании и видении дизайна, ориентированном на цели компании. Основной целью не может быть: «Давайте сделаем сайт красивее».

Дизайнеры веб-сайтов несут ответственность за взаимодействие с пользователем (UX) и пользовательский интерфейс (UI). Наша работа заключается в обеспечении оптимального взаимодействия пользователей с разрабатываемыми нами интерфейсами. Это требует тщательного планирования прямо с замысла проекта.

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

Ценность редизайна веб-сайта перед проектом

Чтобы продемонстрировать этот процесс, давайте рассмотрим этапы редизайна веб-сайта, завершенного для Archeology Southwest, некоммерческой организации, которая исследует и охраняет археологические памятники на юго-западе США.

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

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

Шаг 1: Ознакомьтесь с содержанием

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

Как только это будет сделано, разработайте стратегию того, как все организовать, но не решайте, какой контент следует оставить, а какой следует удалить. Почему бы нет?

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

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

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

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

Шаг 2: Создайте фокус. Упрощать. Организовать.

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

По данным Archeology Southwest, люди посещают их веб-сайт, чтобы найти информацию о текущих проектах, узнать о предстоящих событиях и прочитать ежемесячный журнал. Эти действия отвечают на вопрос: « Что люди делают на сайте?» но не раскрывайте, почему люди вообще посещают сайт.

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

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

Определив фокус, мы можем упростить и организовать. Для Archeology Southwest я начал с разделения контента на категории, не связанные с локациями, такие как страницы команд и годовые отчеты. После небольшой уборки у меня получилась вот такая грубая карта:

На изображении выше представлены две основные области, которые появились: Чем заняться и Места . Раздел «Что нужно сделать» (слева) охватывает действия, о которых посетитель сайта может узнать и выполнить. Места (справа) фокусируется на содержании сайта, связанном с определенными местами. Зачем так структурировать?

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

Кроме того, каждый цветной блок в Locations представляет уникальный тип записи. С организационной точки зрения выставки, занятия и онлайн-выставки — это события разного характера.

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

Оставшаяся организационная структура была простой:

• Страница «О нас», чтобы узнать больше об организации
• Прямая ссылка на страницу «Магазин».
• Страница «Пожертвование»
• Новая страница «Обновления»

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

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

Шаг 3: вовлеките клиента

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

Для Archeology Southwest я создал документ Google с картой сайта и попросил клиента сопоставить его старое содержимое с новой структурой.

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

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

Создайте визуальную структуру с помощью каркаса

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

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

Поскольку ссылка двунаправленная, посетители также могут попасть в Гранд-Каньон, посетив страницу проекта. В итоге у меня получилось вот это:

На странице указателя местоположений отображаются все местоположения, причем самые последние находятся вверху. Строка поиска — это первое, что видит пользователь, зайдя на страницу. Карта Google будет занимать около 80 процентов экрана. Это позволяет пользователям выбирать точки на карте, и при прокрутке или поиске будет отображаться сетка списка.

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

В макете Archeology Southwest взгляд пользователя начинается с заголовка, затем перемещается к блоку контента и, наконец, переходит к правой боковой панели. Каждая часть связанного контента отображается в порядке релевантности. Например, если пользователь читает о Гранд-Каньоне, за этим контентом, скорее всего, последуют фотографии и карта.

Поскольку это в основном образовательный сайт, важно иметь опцию «Связано с этим местоположением». Однако контента, однозначно связанного с каждым местом, немного, поэтому я объединил редко используемый (но связанный) контент в один блок под телом.

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

Предоставьте главной странице четкую цель

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

Новый основной фокус вращается вокруг вторичного блока локаций. Затем следует все, что происходит на archaeologysouthwest.org (текущий журнал, блог, события, информационный бюллетень и т. д.). Вот итерация процесса компоновки:

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

Для V2 (в центре) я создал отдельный столбец, за которым легче следить глазу. Однако его еще можно улучшить. Здесь большую роль играет знание содержания. Я знаю, что Archeology Southwest никогда не проводит более двух событий одновременно, поэтому нет смысла выделять место для нескольких событий на главной странице.

В V3 (справа) я сосредоточился на предстоящих событиях. Если по какой-то причине событий больше двух, пользователь может нажать кнопку «Еще» и просмотреть остальные. Я также уделяю особое внимание текущему журналу, так как он приносит прибыль клиенту. Пользователи начинают сверху и продвигаются вниз по F-шаблону. Поток глаз:

Рекомендуемое место > Добро пожаловать > Журнал > События > Новости

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

Будут ли еще исправления позже в будущем? Да, но это будут корректировки, а не изменения всего процесса. Самое главное, чтобы не было сюрпризов.

Включите руководство по фирменному стилю

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

Экспериментируйте с комбинациями типографики

Типографика — неотъемлемая часть хорошего веб-дизайна, поэтому мы должны заранее определить схему шрифтов. Большая часть айдентики Archeology Southwest использует шрифт Univers Condensed Light и Adobe Caslon. Не было правил, когда следует использовать Adobe Caslon, но я заметил, что он используется не так часто, как Univers.

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

После сравнения шрифтов стало ясно, что Adobe Caslon должен быть шрифтом заголовка, а Univers будет использоваться для субтитров. Установка основных заголовков в регистре предложений придает бренду более индивидуальный вид, тогда как использование заглавных букв создает более корпоративную атмосферу.

Отполируйте внешний вид веб-сайта

Я намеревался создать легкий и открытый опыт, чтобы пользователи чувствовали, что Archeology Southwest одновременно доступна и высоко компетентна. По данным аналитики, большинство посетителей используют настольные браузеры (вероятно, потому, что большинство людей посещают сайт для исследования). Поэтому я изначально сосредоточился на разработке для пользователей настольных компьютеров.

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

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

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

Сильное завершение: учтите детали

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

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

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

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

Веб-редизайн построен на основе тщательного планирования

Оглядываясь назад на процесс редизайна веб-сайта, становится очевидным, что большая часть времени была посвящена организации и планированию. Только 30 процентов проекта было потрачено на разработку сайта.

Часто, когда дизайнеры демонстрируют свою работу, они не могут передать, сколько времени уходит на гайки и болты коммуникации, из-за чего неопытные дизайнеры сразу бросаются к макетам. Финальный продукт? Заброшенные проекты и недовольные клиенты.

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

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