Как описать интерфейс сайта

разработка техдокументации по ГОСТ без бумаги и расстояний

Как описать графический интерфейс пользователя?

Приемы описания графического интерфейса пользователя. Впервые опубликована 09.03.2005 года под названием «Графический интерфейс пользователя». За весь срок своего существования статья уверенно удерживает 2 место в рейтинге просмотров, уступая лишь циклу статей к.т.н. В. А. Глаголева о стоимости разработки техдокументации. Редакция от 10.05.2021.

Создан 05.03.2005 10:47:42

Графический интерфейс пользователя по определению должен быть кривым

Исходные данные

Из раздела форума:

Речь шла о графическом интерфейсе пользователя, о приемах его описания в руководствах пользователей программ. Руководство пользователя, как таковое, имеет место быть только в ГОСТ 34.ххх, а в ГОСТ 19.ххх есть руководство оператора, руководство программиста и руководство системного программиста, которые, в совокупности, и являются руководством пользователя, см. «Как писать руководство пользователя? Часть I» и «Как писать руководство пользователя? Часть II».

Как написать пользовательский сценарий для интерфейса сайта или приложения

Итак, что мы имеем? Имеем:

• реальное деление пользователей на группы, различающиеся уровнем подготовки;
• схему «действие — результат» в совокупности с подходом «делай, как я сказал»;
• испытанную связку «общие сведения, назначение и состав», см. «Как писать техническое задание?!»;
• и, как всегда, рекомендации ГОСТ 19.ххх и IEEE Std 1063-2001.

Группы пользователей и уровень подготовки пользователей

Куда вы руки лезете свои?!

Надо отдать должное телевизионной рекламе. Если отбросить перлы про активный кислород и гигиеническую чистоту туалета, можно заметить, что реклама (по-своему) четко классифицирует материальный мир. Реклама убеждает нас, что существуют, к примеру, Tide и обычный стиральный порошок, Fairy и обычное моющее средство. И так далее.

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

группа Power (Advanced) users

Немного о реалиях по каждой группе пользователей программы (вне рамок прав и полномочий).

Administrators действуют осознанно и воспринимают материал руководства пользователя адекватно. В силу знаний и опыта. С Administrators особых проблем нет.

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

(Печальный факт стремительного сокращения числа Administrators и роста числа Users налицо).

Отечественный подход привычно черно-белый: «кто не с нами — тот против нас», «либо пан, либо пропал», «либо папаха, либо плаха» — третьего не дано. Реально «оттенки серого» имеют место. Речь о Power (Advanced) users — промежуточном состоянии между мозгом и желудком.

PM3. Элементы интерфейса сайта // Что на сайте как называется // Project Manager для новичков

Энергичные (дословный перевод — прелесть!) продвинутые пользователи, в отличие от ленивых и нелюбопытных Users, утратили страх перед неизведанным. В силу своей неиссякаемой энергии, продвинутые пользователи действуют методом «научного тыка», вечно суют нос и руки, куда не следует. Administrators (системные) ненавидят продвинутых пользователей лютой ненавистью — «куда вы руки лезете свои?!».

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

1. либо разрабатывать варианты руководства для каждой группы пользователей (так, к примеру, предусмотрено ГОСТ 19.503-79, ГОСТ 19.504-79 и ГОСТ 19.505-79);
2. либо разработать единое «компромиссное» руководство, способное:
3. быстро сформировать рефлексы у пользователя с мозгом «облегченного полевого образца», заставляющие такого пользователя неосознанно, но безошибочно выполнять задачу;
4. не вызвать раздражения пользователя-профессионала излишней детализацией каждого шага — как нажимать кнопку Cancel, как вводитьтекст, выбирать значения из списков и т. д.

Второй вариант, очевидно, можно считать приемлемым. Именно поэтому не стоит сорить в рунете страничками вроде «Как сделать хорошее руководство пользователя», а следует детально и без спешки проработать обобщенную структуру руководства пользователя (см. «Как писать руководство пользователя? Часть I» и «Как писать руководство пользователя? Часть II»).

Лирическое отступление

Некоторые т.н. «технические писатели» руководствуются в своей жизнедеятельности исключительно т.н. «законами восприятия». Законы восприятия объективно существуют, как и законы физики, — факт бесспорный.

Не новость, что существует условное деление всего рода человеческого по виду восприятия информации (и ряду иных признаков) на дигиталов, аудиалов, визуалов и кинестетиков.

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

Аудиалов единицы. Людей, способных воспринимать все со слов, единицы процентов, если судить по вузовской аудитории. На лекциях всегда присутствует 2-3 «бездельника» (курс — 250 человек), не утруждающие себя конспектированием. В течение двух академических часов товарищи активно «ловят ворон», разгильдяйским видом своим раздражая преподов, а затем блестяще сдают сессию.

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

И, наконец, о кинестетиках. Возможно, армейская дедовщина отчасти имеет место благодаря кинестетикам. Многим знакома сцена: командир «командует команду» «Взвод, бегом марш!» — и начинается столпотворение. Кто-то уже бежит, спотыкаясь о тех, кто только начал трогаться с места или все еще стоит, тупо пялясь на командира. Те, что продолжают стоять — и есть кинестетики.

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

Рассуждать о типах репрезентативной системы — задача психологов. Пусть же лирическое отступление завершится позитивной нотой — в России распределение по способам восприятия таково:

• дигиталов — 25 %;
• аудиалов — 5 %;
• визуалов — 35 %;
• кинестетиков — 35 %.

У наших заокеанских «партнеров» ситуация впятеро хуже:

• дигиталов — 5 %;
• аудиалов — 5 %;
• визуалов — 45 %;
• кинестетиков — 45 %,

что не мешает им жить впятеро лучше нас, занимаясь разбоем и грабежом в мировом масштабе.

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

Схема «действие — результат» в совокупности с подходом «делай, как я сказал»

Было бы величайшей ошибкой думать.

В.И. Ленин, ПСС, т. 41, с. 55

Схема описания графического интерфейса пользователя «действие (пользователя) — результат (ответ программы)» изначально заложена как в ГОСТ 19.ххх, так и в IEEE Std 1063-2001.

В ГОСТ 19.ххх указанная схема представлена структурой смежных разделов:

• описание выполняемой (выполнения) функции;
• ответы программы на команды для выполнения функции.

В IEEE Std 1063-2001 имеется ключевая фраза «Documentation shall explain the formats and procedures for user-entered software commands, including. Examples should illustrate the use of commands».

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

И снова из манифеста: «В то же время не следует думать, что. ». Честное слово, если бы автор настоящей статьи отыскал манифест г-на Кагарлицкого где-нибудь далеко в сети, а не на известном «философтовском» сайте (и без указания авторства), решение было бы однозначным: автор манифеста (ни много ни мало) доктор наук генерал-полковник Д. А. Драгунский, в прошлом — один из блистательнейших авторов «Литературной газеты». Человек не может и не должен думать! Человек способен лишь расставлять приоритеты (что лучше — попИсать или пописАть, передохнУть или передОхнуть — выбрать подходящие варианты. Это та самая омофония?), человеку может что-то «прийти в голову» — но не более того. Рефлексы, рефлексы и тысячу раз рефлексы.

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

Users и Power (Advanced) users следует «вести через перевал» согласно подходу «делай, как я сказал» по жесткой схеме «действие — результат».

Для выполнения операции ТАКОЙ-ТО (или «указанной операции» — помним о шаблонном построении фраз, формализации и унификации) следует («следует» — вежливая отстраненность: хочешь получить результат — делай, как я сказал, не хочешь — не мои проблемы):

1. взять (действие в повелительном наклонении) отвертку в правую руку (рисунок, поясняющий результат);
2. вставить отвертку куда-нибудь (рисунок, поясняющий результат);
3. повернуть отвертку на 90 град. по часовой стрелке (рисунок, поясняющий результат);
4. и так далее.

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

Не следует детально расписывать, как «согнуть пальцы», чтобы удержать отвертку. Хватательный рефлекс в равной степени развит и у Users, и у Power (Advanced) users с пеленок. (Неспроста же дети мгновенно осваивают действия с графическим интерфейсом пользователя). Сведения о выполнении операций вида drag-and-drop и им подобных читатель сможет самостоятельно почерпнуть из руководства пользователя операционной системы.

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

Связка «общие сведения, назначение и состав»

Связка «общие сведения, назначение и состав» многим известна по статье Как писать техническое задание?! Связка, как было показано, не противоречит ни манифесту, ни IEEE Std 1063-2001, ни (упаси боже!) ГОСТ 19.ххх. Переходим к решению поставленной задачи.

Реализация практических приемов описания графического интерфейса пользователя

Многие пользователи AuthorIT отмечают, что AuthorIT User Guide «малость туповат». Что неудивительно — в Новой Зеландии, на «родине» AuthorIT, о российских подходах «мужики-то и не знают». К рассмотрению предлагается альтернативный вариант описания графического интерфейса пользователя в рамках одной из возможностей AuthorIT (фрагмент руководства с подробными комментариями).

Читателю, причисляющему себя к разработчикам-профессионалам, рекомендуется перейти непосредственно к разделу Что получилось в результате.

Отдельные технические писатели всех времен и народов язвительно заметят, что «ощущения тупости» после прочтения настоящей статьи у них изрядно прибавилось. Или «что сначала материал статьи излагался как-то живо, а потом вдруг стало уныло и скучно». Правильно, статья-то пишется не ради развлекухи. Начиная с настоящего раздела кое-кому придется «наморщить ум», чтобы не заскучать, или прекратить чтение.

В двух словах: AuthorIT Administrator позволяет создавать, а AuthorIT позволяет вставлять в свои топики переменные нескольких видов в формате . При публикации в документ MSWord (или в документ иного формата) переменные топиков замещаются соответствующими им значениями. Например, созданная в AuthorIT Administrator переменная со списком значений , вставленная в топик AuthorIT, в зависимости от пожелания разработчика документа, будет «выглядеть» так:

В тексте топика

В тексте публикации

FineDeveloper обеспечивает выполнение.

Источник: tdocs.su

Как создать оптимальную структуру сайта

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

Разные типы структур подходят под разные типы сайтов:

• Линейная структура: страницы сайта переходят одна в другую по логической цепочке (например, главная страница — услуги — оставить заявку). Такая структура работает для небольших сайтов (идеально подойдет для бизнес-визитки, презентации бренда и т.п.).

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

• Иерархическая илидревовидная структура сайта (самая распространенная и может использоваться для всех типов сайтов): главные и общие разделы (т.н. родительские страницы) делятся на ряд более конкретных (дочерних страниц)

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

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

Если на вашем сайте содержится большое количество информации, не может быть и речи о какой-либо структуре кроме иерархической. Путь пользователя от главной страницы до конкретной (например, карточки товара) может быть таким: Каталог → Спорт и увлечения → Спортивные товары → Бадминтон → Ракетки (для интернет-магазина общего назначения) или Каталог товаров → Виды спорта → Бадминтон → Ракетки (для магазина спортивных товаров). Если этот путь усложнен непонятным названием категорий или количеством переходов — значит структура сайта нуждается в переработке.

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

Схема структуры интернет-магазина

Схема структуры продуктового сайта

Почему структура сайта важна для SEO

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

• Поисковики работают в интересах пользователей. Ранжирование сайтов в поисковых системах напрямую связано с тем, насколько эти сайты удобны для пользователей. Любая страница должна находиться в не больше, чем три клика, и переходы между страницами должны быть понятными и очевидными — что и обеспечивает логическая структура сайта. Чем лучше юзабилити вашего сайта, тем легче и поисковым роботам обходить ваши страницы.
• Поисковики учитывают всю структуру. Хоть поисковые результаты формируются на уровне страниц, Google способен оценить место страницы в общей структуре сайта; и чем легче поисковым роботам это сделать, тем лучше.
• Техническая оптимизация обречена на провал без продуманной структуры. Схема сайта чрезвычайно важна для технической SEO — особенно для эффективности сканирования и индексирования.
• Структура делает сайт понятным для поисковых систем и упрощает процесс сканирования. Логично выстроенная структура и перелинковка оптимизирует краулинговый бюджет — количество страниц, которые может просканировать поисковой робот в заданное время. Но имейте в виду, что краулинговый бюджет также зависит от масштабов сайта вне зависимости от его понятности.
• Хорошая структура покрывает семантику сайта и грамотно распределяет контент по разным пользовательским интентам (поисковым намерениям).

Пошаговая инструкция по созданию правильной структуры сайта

Работа над структурой — одна из важнейших задач при создании сайта. Давайте пройдемся по каждому шагу, необходимому для SEO-адаптированной структуры сайта.

Шаг 1. Анализируем конкурентов

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

Инструмент «Анализ конкурентов» позволяет узнать, как страницы конкурирующего сайта ранжируются в разных поисковых системах. Выбрав в инструменте «Органический трафик» → «Страницы», вы увидите все страницы и поддомены сайта, которые можно отсортировать по доле трафика и количеству ключевых слов. Для удобства экспортируйте результаты в xls- или csv-файл — по полученному списку URL-адресов можно оценить структуру сайта и выделенные конкурентом тематические блоки:

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

«Анализ конкурентов» в SE Ranking позволяет проанализировать семантические пересечения между тремя сайтами: вы можете увидеть, по каким ключам ранжируются конкуренты. Статистика по органическим ключам в инструменте также поможет вам оценить ситуацию и взять себе на вооружение выгодные ключевые запросы.

Шаг 2. Собираем семантическое ядро и кластеризируем

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

• Собрав структуру конкурентов и имея представление о том, какие страницы вам нужны, вы можете собирать семантику
• Для подбора подходящих ключей воспользуйтесь инструментом «Анализ ключевых слов»: указав поисковую систему, вы получите список похожих и релевантных фраз и список доменов, лидирующих в органической и платной выдаче по указанному запросу. Рекомендуем ставить фильтр по позициям и отсеивать результаты ниже 30-й, так как там обычно находятся не очень релевантные запросы
• Соберите максимальное количество других запросов, включая сверхнизкочастотные, пользуясь инструментами SE Ranking и Google Trends. Важно включить в семантическое ядро ключи разной частотности
• Пересмотрите полученный список и отсейте повторяющиеся ключевые фразы, а также те, которые не подходят вашему сайту. Классифицируйте оставшиеся по интентам и параметрам частотности и сложности
• Как только вы определились со всеми ключевыми словами, сгруппируйте их благодаря инструменту «Кластеризация» и распределите между разными страницами

Шаг 3. Создаем иерархию и категоризируем страницы

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

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

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

Рекомендуем создавать структуру нового сайта следующим образом:

• Продумайте, какие страницы обязательны для вашей ниши
• Используйте инструменты визуализации вроде Mindmup и XMind, чтобы представить иерархию страниц: какие из них представляют общие категории, какие — подкатегории, и так далее; какие связи должны быть между разными страницами
• Не ориентируйтесь на частотность ключа при распределении их по категориям, подкатегориям или фильтрам — не всегда самый высокочастотный запрос будет соответствовать топ-ключу для страницы
• Выделите служебные страницы и продумайте логику работы с ними: ограничьте индексирование результатов поиска по сайту с помощью серверных запретов noindex, nofollow, пагинации — с помощью noindex, follow; а юридические страницы (контакты, соглашения и т.п.) оставьте открытыми к индексации
• Если на вашем сайте предусмотрены фильтры, продумайте техническую реализацию для всех их видов, не забудьте про пересечение двух и более фильтров. При наличии сортировки закрывайте ее от индексации
• Обязательно обеспечьте возможность масштабирования — внесения новых категорий и подкатегорий без полной переделки структуры
• До запуска сайта вы можете протестировать структуру, пользуясь инструментами визуализации, которые показывают, на какие URL можно перейти с главной страницы и как все URL перелинкованы между собой:

Частые ошибки в структуре сайтов

Можно выделить типические ошибки, которые мешают разработать правильную структуру сайта:

• Непонятное название категорий. И для пользователей, и для поисковиков будет сложнее оценить наполнение сайта, если названия категорий не отображают их сущности, дублируются или содержат несколько слов-синонимов
• Недостаточная классификация. Если подкатегории и фильтры не проработаны до мельчайших деталей, конкретную страницу будет найти сложно
• Дубликаты страниц. Повторяющийся или идентичный контент на разных URL негативно влияет на ранжирование в поисковых системах
• «Мусорные» страницы. Проблемы с CMS или кодом могут привести к созданию на сайте URL с динамическими параметрами, которые выдают 200 код ответа и являются техническими дубликатами
• Неактуальные данные. Убедитесь, что все страницы будут актуальны (не будут содержать устаревший контент, отсутствующие товары и т.п.)

Шаг 4. Проверяем структуру URL

При проработке URL-структуры рекомендуем:

• Использовать человекопонятные URL (состоящие из понятных слов) и делать адрес максимально коротким
• Использовать ключевой запрос в URL-адресе, но избегать перенасыщения ключей
• Между словами использовать дефисы вместо нижнего подчеркивания — так понятнее для поисковых систем, которые воспринимают дефис как разделение между словами и нижнее подчеркивание как часть слова
• Если вы используете кириллические адреса, унифицируйте кодировку для страниц и адресов
• Если ваш сайт мультиязычный, добавляйте атрибуты hreflang и индикатор языка к каждому URL (позиция индикатора в URL — домен верхнего уровня, поддомен или поддиректория — будет зависеть от вашей реализации мультиязычности). Можно опираться на самые популярные подходы к URL-структуре для стран, на которые вы ориентируетесь

Шаг 5. Связываем страницы сайта между собой

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

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

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

Шаг 6. Обеспечиваем удобную навигацию

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

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

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

Хедер. Продумайте, что должна содержать шапка сайта. Хедер — сквозной компонент сайта вверху страницы, который обычно представляет основные категории и облегчает навигацию. Вы можете добавить верхнее меню в хедер, контакты компании, поле для поиска, поле для переключения языка или города. В зависимости от ниши шапка сайта будет включать самые важные разделы (например, «Доставка» для интернет-магазинов, «Тарифы» для различных сервисов).

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

Фильтры для категорий и сортировка. Если ваш сайт — онлайн-магазин, вам нужно продумать удобные фильтры для поиска нужного товара. Фильтры должны покрывать все возможные характеристики представленных товаров, но не выглядеть громоздко и не мешать навигации по сайту. Продумайте разные возможности сортировки, актуальные для пользователей.

Шаг 7. Создаем карту сайта

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

Все детали того, как создать и отправить файл Sitemap, описаны в справке Google. Вам нужно создать xml-файл, который будет содержать список всех URL и иерархию страниц. Создание такой карты поможет сделать индексацию более эффективной. В инструменте SE Ranking «Технический аудит сайта» есть возможность сформировать xml-карту.

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

Шаг 8. Тестируем сайт

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

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

После запуска сайта вы можете мониторить его показатели с помощью инструмента «Аудит сайта» — так вы просканируете все страницы, проверите внутренние ссылки, увидите технические ошибки и проблемы с метатегами (и получите рекомендации по их исправлению). Кроме того, проверьте сайт через Google Search Console — узнайте, как Google бот видит страницы, как они попадают в индекс, какие он посчитал качественными, а на каких обнаружены проблемы.

Инструменты для отслеживания поведения юзеров на сайте (хитмеп типа Hotjar), Google Tag Manager, А/Б тестирование, юзабилити-тестирование, а также живой фидбек могут дать вам представление о том, на каких страницах пользователи задерживались, а на каких нет, какие клики приводили к конверсии и т.п. Эти данные помогут определить сильные и слабые места в навигации и структуре. Файндабилити (findability) — то, насколько легко и быстро можно найти интересующую информацию — ключевой показатель работающей структуры сайта.

Шаг 9. Проверяем сайтлинки

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

Как это выглядит в Google:

Поисковики сами создают сайтлинки — и делают это именно на основе структуры сайтов. Вот базовые советы разработки структуры:

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

Структура сайта как неотъемлемая часть продвижения

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

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

Источник: seranking.com

Как описать интерфейс сайта

22.04.2016

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

Что такое информационный интерфейс?

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

Машина перегрелась? Двигатель собирается взорваться? Надо съехать на обочину? Или игнорировать значок и надеяться на лучшее?

А если бы у вас появился вот такой значок? Были бы вы спокойнее? Добавление небольшого текста о том, что автомобиль требует обслуживания после 10000 миль пробега, добавляет ясности и показывает, что сообщение является важным, но не срочным.

А ещё может появиться значок, что машину скоро надо везти на сервис (конечно, если вы знаете английский). Появилась новая проблема – перевод.

Любые продукты (включая программное обеспечение!) содержат контент, который даёт возможность пользователям что-то делать. Это может быть изображение, слова, или и то, и другое. Информация находится в пользовательском интерфейсе (то, что вы видите, когда используете продукт).

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

Хороший пользовательский интерфейс означает хорошую пользовательскую поддержку

Цель состоит в том, чтобы разработать интуитивный и понятный пользовательский интерфейс, чтобы исключить потребность в масштабных объемах «документации» (хотя иногда и требуется дополнительный контент). Мы отходим от создания традиционной «документации», такой как руководства пользователя, руководства по установке, PDF-файлы и так далее. Мы хотим, чтобы информационный интерфейс легко интегрировался в общий интерфейс.

Информационное развитие играет решающую роль при работе с проектными группами для предоставления пользователям исключительного, интуитивно понятного и даже забавного информационного интерфейса в пользовательском интерфейсе. Хороший пользовательский интерфейс ТРЕБУЕТ отличного контента. Информационные разработчики (в былые времена известные как техписы, разработчики пользовательской помощи, разработчики контента и т.д.) используют проверенные на практике принципы того, как пользователи читают и потребляют информацию. Это помогает упростить задачи пользователей, повысить производительность и уменьшить разочарование среди пользователей.

Работа с пользовательским интерфейсом

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

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

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

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

Пишем для взаимодействия

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

Советы для создания хорошего пользовательского интерфейса.

Вот несколько рекомендаций для создания приятного пользовательского интерфейса:

Узнаём своих пользователей

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

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

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

TurboTax позволяет обычным пользователям, таким как вы и я, оплачивать налоги. Это страшно? О чём вы думаете, когда начинаете? Что делать, если идёт проверка? Что делать, если я совершу ошибку? TurboTax начинается с сообщения, которое помогает расслабиться.

Ну или что-то вроде того. Даже когда вы делаете ошибку, приложение объяснит, что делать.

Интегрируем пользовательскую поддержку в интерфейс

Текст на экране помогает пользователям понять, что эти параметры означают в действительности

Какие компании, имеющие отличный пользовательский интерфейс, как правило, приходят на ум? Apple, конечно же (по крайней мере, большую часть времени!) Обеспечивая встроенную помощь в приложениях в рамках этой функции, вы можете направлять пользователя к выполнению задачи. Я понятия не имела, что iCloud Photo Sharing делает по сравнению с My Photo Stream, пока не увидела описание.

Или интегрируйте подсказки и всплывающие окна, как в этой игре типа Эрудита.

Создаём руководства

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

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

Подходящий тон и кнопки для особой аудитории. Например, детей?

Это приложение выбирает более дружеский тон для своей аудитории, говоря «Привет» и «Составь Луне компанию и нарисуй её хорошего друга Мо». А насколько более ясным было бы приложение, если бы в интерфейсе были кнопки Экспортировать и Не экспортировать? Мне нравится! Оно идеально подходит своей аудитории.

Создаём контент на основе задач

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

Точно не ЭТОТ сайт. Что делать? С чего начать?

Источник: protext.su