246 lines
24 KiB
TeX
246 lines
24 KiB
TeX
|
\documentclass{article}
|
|||
|
|
|
|||
|
|
\input{../common-preamble}
|
|||
|
|
\input{../bmstu-preamble}
|
|||
|
|
\setcounter{secnumdepth}{0}
|
|||
|
|
|
|||
|
|
\begin{document}
|
|||
|
|
\pagestyle{empty}
|
|||
|
|
\makeBMSTUHeader
|
|||
|
|
|
|||
|
|
\makeReportTitle{лабораторной}{1}{Введение в анализ интерфейсов}{Протоколы и интерфейсы информационных систем}{}{Большаков В.Э.}
|
|||
|
|
\newpage
|
|||
|
|
\tableofcontents
|
|||
|
|
\newpage
|
|||
|
|
\section{Упражнение 1}
|
|||
|
|
\subsection{** За одну минуту найти максимальное количество ссылок о себе в Интернете}
|
|||
|
|
Разные поисковые системы ожидаемо выдают разные результаты поиска по сочетанию фамилии, имени и отчества.
|
|||
|
|
|
|||
|
|
Так, Google выдал на первых трёх страницах поиска (не считая однофамильцев) более десятка ссылок на налоговую информацию как физического, так и юридического лица. В третьем десятке результатов появились ссылки на профили используемых ресурсов для разработчиков.
|
|||
|
|
|
|||
|
|
Поисковик Yandex первой строкой выдаёт ссылку на соответствующий запросу профиль в социальной сети <<вКонтакте>>. Далее аналогично, налоговая информация, ссылка на профиль <<GitHub>> появилась только на пятой странице. Очевидно, что Яндекс более ориентирован на то, что им будут пользоваться в России, искать информацию о человеке, полезную для российских заинтересованных лиц.
|
|||
|
|
|
|||
|
|
%\addcontentsline{toc}{section}{Упражнение 2}
|
|||
|
|
\section{Упражнение 2}
|
|||
|
|
\subsection{*** Найти примеры семи комбинаций из трёх указанных способов}
|
|||
|
|
В упражнении были указаны следующие способы достижения быстрого и удобного просмотра веб-сайтов:
|
|||
|
|
\begin{enumerate}
|
|||
|
|
\item Создание визуальной иерархии
|
|||
|
|
\item Использование принятых условностей
|
|||
|
|
\item Разделять страницы на чёткие области
|
|||
|
|
\item Ясно обозначить активные элементы
|
|||
|
|
\item Уменьшить визуальный шум
|
|||
|
|
\end{enumerate}
|
|||
|
|
По результатам поиска были обнаружены следующие сочетания:
|
|||
|
|
\begin{enumerate}
|
|||
|
|
\item Хорошим примером \textit{плохого} дизайна (который, по словам создателей, был разработан таким преднамерено) может служить сайт reddit.com (до его превращения в социальную сеть <<примерно как все остальные>> с понятной лентой событий и областями для новостей и уведомлений).
|
|||
|
|
|
|||
|
|
\includegraphics[width=14cm]{01-isip-lab-01-reddit.png}
|
|||
|
|
|
|||
|
|
Здесь мы видим:
|
|||
|
|
\begin{itemize}
|
|||
|
|
\item явную перегруженность (шумность) интерфейса (5.1);
|
|||
|
|
\item отсутствие явного разделения областей (3);
|
|||
|
|
\item неявно обозначенные активные элементы (4).
|
|||
|
|
\end{itemize}
|
|||
|
|
\item Разнообразные любительские сайты и личные странички обычно оставляют весьма неприятное впечатление о себе.
|
|||
|
|
|
|||
|
|
\includegraphics[width=14cm]{01-isip-lab-01-gifs.png}
|
|||
|
|
|
|||
|
|
Хотя, вероятно, задумывались авторами, как источники полезной информации:
|
|||
|
|
\begin{itemize}
|
|||
|
|
\item налицо полное отсутствие какой-либо иерархии (1);
|
|||
|
|
\item отсутствие общепринятых условностей (2);
|
|||
|
|
\item данная страница настолько шумная, что даже заголовок не напоминает о цели визита (5.2).
|
|||
|
|
\end{itemize}
|
|||
|
|
\item Особенно интересно наблюдать юзабилити сайтов веб-студий, которые, предполагается, должны делать хорошие веб-сайты для своих клиентов.
|
|||
|
|
|
|||
|
|
\includegraphics[width=14cm]{01-isip-lab-01-popup.png}
|
|||
|
|
\begin{itemize}
|
|||
|
|
\item неясно обозначены активные элементы (4);
|
|||
|
|
\item много фонового шума (всплывающие окошки, реклама) (5.2);
|
|||
|
|
\item отсутвтие иерархии в основной части сайта - каталоге работ (1).
|
|||
|
|
\end{itemize}
|
|||
|
|
\item Лаконичный дизайн некоторых сайтов на первый взгляд выглядит привлекательно, но при работе с таким ресурсом обычно не получается быстро разобраться, где искать нужное:
|
|||
|
|
|
|||
|
|
\includegraphics[width=14cm]{01-isip-lab-01-elements.png}
|
|||
|
|
\begin{itemize}
|
|||
|
|
\item отсутствие общепринятых условностей (2);
|
|||
|
|
\item отсутствие явного разделения областей (3);
|
|||
|
|
\item неясно обозначены активные элементы (4);
|
|||
|
|
\end{itemize}
|
|||
|
|
\item На снимке экрана ниже не видно, но это действующий сайт небольшого локального магазина, а на фоне салют - это движущиеся изображения.
|
|||
|
|
|
|||
|
|
\includegraphics[width=14cm]{01-isip-lab-01-navigation.png}
|
|||
|
|
\begin{itemize}
|
|||
|
|
\item отсутствие общепринятых условностей (2);
|
|||
|
|
\item отсутствие явного разделения областей (3);
|
|||
|
|
\item чрезвычайно много отвлекающих факторов, из-за которых не видно даже основной навигации (5.2)
|
|||
|
|
\end{itemize}
|
|||
|
|
\item Далее будет представлено два снимка, призванные показать, что основная информация при переходе по ссылкам изменяется за пределами видимости посетителя ресурса. Также в каталоге отсутствует иерархия, и вся информация на сайте представлена в виде сплошного полотна картинок и текста
|
|||
|
|
|
|||
|
|
\includegraphics[width=14cm]{01-isip-lab-01-vet1.png}
|
|||
|
|
|
|||
|
|
Отдельно отмечу, что верхний снимок экрана - это одна страница, помещающаяся на один экран и при нажатии пунктов меню он остаётся неизменным.
|
|||
|
|
|
|||
|
|
\includegraphics[width=14cm]{01-isip-lab-01-vet2.png}
|
|||
|
|
|
|||
|
|
\begin{itemize}
|
|||
|
|
\item Каталог услуг в виде плиточного перечисления создаёт трудности поиска нужной услуги (1);
|
|||
|
|
\item отсутствие общепринятых условностей, например, поисковой строки (2);
|
|||
|
|
\item отсутствие явного разделения областей, зато постоянно перед глазами контактная информация, которая ещё и продублирована в разделе <<Контакты>>. (3);
|
|||
|
|
\end{itemize}
|
|||
|
|
|
|||
|
|
\item Отдельно хотелось бы отметить шедевр от внимательных веб-дизайнеров, допустивших попадание в сеть сайта, воспользоваться которым не сможет никто и никогда:
|
|||
|
|
|
|||
|
|
\includegraphics[width=14cm]{01-isip-lab-01-best.png}
|
|||
|
|
|
|||
|
|
В целом, к этому ресурсу можно применить все пять способов улучшения навигации и использования.
|
|||
|
|
\end{enumerate}
|
|||
|
|
|
|||
|
|
\section{Упражнение 4}
|
|||
|
|
\subsection{** Найти примеры пяти веб-сайтов на которых не выполняются рекомендации по сокращению текстовой информации}
|
|||
|
|
Излишней многословностью обычно грешат страницы ресторанов, баз отдыха и отелей, а также полу-любительские страницы локальных бизнесов, таких как автосервисы, сферы услуг и предпринимателей, вот несколько примеров:
|
|||
|
|
\begin{enumerate}
|
|||
|
|
\item Ресторан <<Пирогово>>
|
|||
|
|
|
|||
|
|
\includegraphics[width=14cm]{01-isip-lab-01-pirogovo.png}
|
|||
|
|
|
|||
|
|
\item Ресторан <<Зверобой>>
|
|||
|
|
|
|||
|
|
\includegraphics[width=14cm]{01-isip-lab-01-zveroboy.png}
|
|||
|
|
|
|||
|
|
\item Санаторий <<Литвиново>> (отдельное им спасибо за замену словосочетания <<лечение грязями>> на слово <<бальнеоклиматический>>)
|
|||
|
|
|
|||
|
|
\includegraphics[width=14cm]{01-isip-lab-01-litvinovo.png}
|
|||
|
|
|
|||
|
|
\item Автосервис <<Гиперавто>>
|
|||
|
|
|
|||
|
|
\includegraphics[width=14cm]{01-isip-lab-01-hyperauto.png}
|
|||
|
|
|
|||
|
|
\item Частная пекарня в Екатеринбурге
|
|||
|
|
|
|||
|
|
\includegraphics[width=14cm]{01-isip-lab-01-bakery.png}
|
|||
|
|
|
|||
|
|
\end{enumerate}
|
|||
|
|
\section{Упражнение 5}
|
|||
|
|
\subsection{** Найти примеры пяти веб-сайтов для которых не выполняются требования по размещению информации на начальной странице}
|
|||
|
|
\begin{enumerate}
|
|||
|
|
\item Главная страница сайта microsoft.com
|
|||
|
|
|
|||
|
|
\includegraphics[width=14cm]{01-isip-lab-01-microsoft.png}
|
|||
|
|
|
|||
|
|
На данной странице представлены все необходимые элементы, кроме иерархии веб-сайта, которая убрана в выпадающий список <<Продукты Майкрософт>>. Таким образом, формально, эта страница является хорошим примером. С другой стороны, сайт очень сильно ориентирован на пользователей именно компании, и людям, не часто пользующимся продуктами данной компании, может быть сложно понять, как именно получить информацию о нужном продукте или услуге, поскольку отсутствует панель, отображающая полную иерархию веб-сайта.
|
|||
|
|
\item Главная страница сайта google.com
|
|||
|
|
|
|||
|
|
\includegraphics[width=14cm]{01-isip-lab-01-google.png}
|
|||
|
|
|
|||
|
|
Страница была специально разработана лаконичной, что сформировало у пользователей узнаваемый облик компании. На данной странице нет ни одного компонента, присущего главным страницам, кроме глобального поиска. Маркетинговым ходом и основной отличительной чертой компании также является то, что на главной странице поисковика никогда не было рекламы ни за какие деньги.
|
|||
|
|
\item Главная страница сайта intel.com
|
|||
|
|
|
|||
|
|
\includegraphics[width=14cm]{01-isip-lab-01-intel.png}
|
|||
|
|
|
|||
|
|
Страница содержит все обычные компоненты, кроме рекламы. Скорее всего, компания маштаба Intel, может себе позволить не размещать рекламу на своей главной странице. На этом примере мы видим, что наличие рекламы абсолютно не является обязательным пунктом для начальной страницы.
|
|||
|
|
\item Главная страница интернет-магазина ozon.ru
|
|||
|
|
|
|||
|
|
\includegraphics[width=14cm]{01-isip-lab-01-ozon.png}
|
|||
|
|
|
|||
|
|
На странице спрятана большая часть компонентов, вместо них располагается реклама и анонс содержимого сайта. Вероятнее всего, это сделано по причине узкой направленности страницы: привлекать покупателей и нацеливать их на уход в глубину сайта.
|
|||
|
|
\item Главная страница радиолюбительского сайта radiomuseum.org
|
|||
|
|
|
|||
|
|
\includegraphics[width=14cm]{01-isip-lab-01-radio.png}
|
|||
|
|
|
|||
|
|
На данной странице отсутствуют как слоган и описание основной идеи, так и иерархия. Если за нагромождением сливающегося текста ещё можно найти форму личного кабинета и строку поиска, то вряд ли с первого взгляда будет ясно, о чём этот сайт, и что чаще всего запрашивают пользователи.
|
|||
|
|
|
|||
|
|
\end{enumerate}
|
|||
|
|
\section{Упражнение 6}
|
|||
|
|
Основными навигационными элементами веб-сайта являются
|
|||
|
|
\begin{enumerate}
|
|||
|
|
\item логотип
|
|||
|
|
\item название страницы
|
|||
|
|
\item разделы
|
|||
|
|
\item элементы локальной навигации
|
|||
|
|
\item индикаторы местоположения (breadcrumbs)
|
|||
|
|
\item поиск
|
|||
|
|
\end{enumerate}
|
|||
|
|
\subsection{** Открыть десять веб-страниц, найти и выделить шесть элементов навигации}
|
|||
|
|
\begin{enumerate}
|
|||
|
|
\item https://www.google.com/
|
|||
|
|
|
|||
|
|
\includegraphics[width=14cm]{01-isip-lab-01-06-google.png}
|
|||
|
|
|
|||
|
|
\item https://yandex.ru
|
|||
|
|
|
|||
|
|
\includegraphics[width=14cm]{01-isip-lab-01-06-yandex.png}
|
|||
|
|
|
|||
|
|
\item https://mail.ru
|
|||
|
|
|
|||
|
|
\includegraphics[width=14cm]{01-isip-lab-01-06-mail.png}
|
|||
|
|
|
|||
|
|
\item https://www.youtube.com
|
|||
|
|
|
|||
|
|
\includegraphics[height=4cm]{01-isip-lab-01-06-youtube.png}
|
|||
|
|
|
|||
|
|
\item https://jugru.org
|
|||
|
|
|
|||
|
|
\includegraphics[width=14cm]{01-isip-lab-01-06-jugru.png}
|
|||
|
|
|
|||
|
|
\item https://en.cppreference.com/
|
|||
|
|
|
|||
|
|
\includegraphics[width=14cm]{01-isip-lab-01-06-cppreference.png}
|
|||
|
|
|
|||
|
|
\item https://www.ozon.ru
|
|||
|
|
|
|||
|
|
\includegraphics[width=14cm]{01-isip-lab-01-06-ozon.png}
|
|||
|
|
|
|||
|
|
\item https://github.com
|
|||
|
|
|
|||
|
|
\includegraphics[width=14cm]{01-isip-lab-01-06-github.png}
|
|||
|
|
|
|||
|
|
\item https://gitlab.com/
|
|||
|
|
|
|||
|
|
\includegraphics[width=14cm]{01-isip-lab-01-06-gitlab.png}
|
|||
|
|
|
|||
|
|
\item https://www.microsoft.com/ru-ru/
|
|||
|
|
|
|||
|
|
\includegraphics[width=14cm]{01-isip-lab-01-06-microsoft.png}
|
|||
|
|
\end{enumerate}
|
|||
|
|
\subsection{*** Предложить вариант навигации для десяти исследуемых страниц}
|
|||
|
|
\begin{enumerate}
|
|||
|
|
\item Навигация по главной странице (google.com) устроена таким образом, чтобы пользователь не отвлекался от цели своего визита на страницу, в левом-верхнем углу сконцентрированы элементы управления и местоположения пользователя. От демонстрации всех разделов сайта (услуг) компания отказалась для увеличения концентрации пользователя именно на поиске.
|
|||
|
|
\item Как видно (yandex.ru), основная информация сконцентрирована в левой и верхней части страницы, но нет акцента на элементах управления в чати перехода между разделами сайта и предоставляемыми услугами. Возможно, удобнее было бы увеличить раздел локальной навигации и добавить индикаторы текущего местоположения пользователя.
|
|||
|
|
\item Основная информация о посещаемом ресурсе (mail.ru) и его логотип расположены в левом-верхнем углу, также в этом пространстве находится основная услуга компании - электронная почта. Элементы локальной навигации и текущего местоположения пользователя объединены и находятся в середине, но акцент смещён не на них, а на поисковую строку. Таким образом, основной рекомендацией может быть отделение локальной навигации от демонстрации текущего местоположения.
|
|||
|
|
\item На данной странице (youtube.com) недостаточно выделена локальная навигация и текущее положение пользователя, но, вероятнее всего, в этом нет острой необходимости в связи с узкой специализацией ресурса.
|
|||
|
|
\item Сайт организатора конференций (jugru.org). Полностью отсутствует локальная навигация, что делает перемещение по внутренним страницам ресурса не удобным. Частично присутствует индикатор местоположения, и хотя пользователь знает, где он находится, нет понимания, насколько далеко он от, например, главной страницы.
|
|||
|
|
\item Страница справочника по языку программирования (cppreference.com). Элементы интерфейса и навигации объединены, за счёт чего создаётся соответствие внешнего вида и цели ресурса. Единственным недочётом я могу назвать недостаточный акцент на поисковой строке, поскольку это должен быть наиболее часто используемый на странице элемент.
|
|||
|
|
\item Навигация по сайту (ozon.ru) ориентирована на поисковую строку, то есть предполагается, что пользователь не должен самостоятельно осуществлять перемещение по каталогу, но поскольку компания предоставляет и другие услуги, кроме онлайн покупок, следует вынести каталог услуг на отдельную панель, возможно, в левой части страницы, и сделать эту панель доступной для всех страниц.
|
|||
|
|
\item Два ресурса (github.com, gitlab.com) с идентичными проблемами навигации: совершенно непонятно, где пользователь находится, и как ему попасть в нужное место, ни карты сайта, ни секции с разделами, ни локальной навигации. Вероятнее всего это обусловлено узкой специализацией и технической направленностью обоих. Так рекомендациями для этих сайтов может стать общее повышение дружественности пользователю и создание статичных панелей вверху и слева с перечнями предоставляемых услуг и текущего местоположения пользователя.
|
|||
|
|
\item Главная страница сайта (microsoft.com) содержит только визуальную информацию и ссылки на разделы, которые хочет продемонстрировать компания, дальнейшая же навигация по сайту, продуктами и услугам осуществляется либо через множество пунктов меню, любо через строку поиска. Также при переходе на внутренние страницы теряется общее ощущение местоположения из-за отсутствия индикаторов местоположения. Компании, возможно, следует сделать информацию о текущем местоположении пользвоателя более явной.
|
|||
|
|
\end{enumerate}
|
|||
|
|
|
|||
|
|
\section{Упражнение 7}
|
|||
|
|
\subsection{* Выбрать три веб-сайта с вкладками. Провести их анализ в соответствии с правилами A-D}
|
|||
|
|
\begin{itemize}
|
|||
|
|
\item [A.] Чёткая прорисовка;
|
|||
|
|
\item [B.] Отличие от других графических элементов;
|
|||
|
|
\item [C.] Выделение цветом;
|
|||
|
|
\item [D.] Обязательное выделение только одной из вкладок.
|
|||
|
|
\end{itemize}
|
|||
|
|
Так всем четырём правилам не соответствует ни один из представленных ниже вариантов, хотя есть предположение, что современные тенденции в графическом дизайне тяготеют к единообразию разных типов компонентов:
|
|||
|
|
\begin{enumerate}
|
|||
|
|
\item На странице ozon.ru видно, что вкладки ничем не отличаются от ссылок в верхней правой части <<шапки>> сайта. Также совершенно никак не выделена вкладка на которой находится пользователь (в данном случае, <<бренды>>):
|
|||
|
|
|
|||
|
|
\includegraphics[width=14cm]{01-isip-lab-01-07-ozon.png}
|
|||
|
|
|
|||
|
|
\item Вкладки на странице restore не ничем не отличаются от логотипа в левом верхнем углу, не отличаются от выпадающего списка выбора региона, не выделены цветом, и выглядят как просто ссылки:
|
|||
|
|
|
|||
|
|
\includegraphics[width=14cm]{01-isip-lab-01-07-restore.png}
|
|||
|
|
|
|||
|
|
\item Аналогично остальным, на сайте auto.ru панель глобальной навигации не отличается от вкладок с локальной навигацией. Но выполняется пункт (С) про выделение цветом.
|
|||
|
|
|
|||
|
|
\includegraphics[width=14cm]{01-isip-lab-01-07-auto.png}
|
|||
|
|
|
|||
|
|
\end{enumerate}
|
|||
|
|
|
|||
|
|
\end{document}
|