Когда же набираешь "Что такое [нечто]" одной из первых ссылок попадаешь на Википедию. Целью проекта является создание ресурса, который будет агрегировать ответы на вопросы "как делать"

LIFE PATTERNS

Бриф на дизайн сайта

Июнь, 2012

Описание продукта

Львиная доля запросов в поисковиках начинается со слов “Как [сделать что-то]”. Редко когда сразу получается найти адекватное решение. В лучшем случае придется проанализировать содержимое пары десятков ресурсов на тему. Когда же набираешь “Что такое [нечто]” одной из первых ссылок попадаешь на Википедию. Целью проекта является создание ресурса, который будет агрегировать ответы на вопросы “как делать”.

В настоящее время в сети существуют сотни сервисов, которые позволяют делиться разного рода контентом. Так SlideShare позволяет публиковать презентации, Flickr фото, YouTube видео. Подобным образом Life Patterns позволит публиковать паттерны решений тех или иных вопросов.

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

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

по прямой ссылке на сайте Life Patterns
в форме виджета для страницы (форума, блога)
в виде публикации в таймлайне Facebook
посредством мобильного приложения.

Такую инструкцию будет проще читать, ею легко будет поделиться, она будет отличаться определенной интерактивностью.

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

Домашняя страница
Страница категории / результатов поиска
Страница паттерна
1. Виджет с паттерном

Остановимся подробнее на каждой из них.

Домашняя страница

Основные функции домашней страницы:

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

Обязательные элементы страницы:

Лого (наименование сервиса) *
Предложение зарегистрироваться (в том числе через Facebook и Twitter) либо ссылка на профиль, если человек авторизовался на сайте. *
Описание сервиса (иллюстрация + текст в 200-250 символов).
Предложение добавить свой паттерн
Ссылки на популярные категории паттернов (н-р: Cookery, Sport, Tourism, Handmade и др.)
Строка поиска по паттернам
Футер с копирайтом и ссылкой на страницу с контактами. *

* - элемент, который должен присутствовать на всех страницах сайта

Страница категории / результатов поиска

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

Основная функция данной страницы – предоставить пользователю доступ к паттернам по определенной теме.

Обязательные элементы страницы:

Наименование категории (либо содержимое поисковой строки, если страница играет роль страницы с результатами поиска)
Список паттернов данной категории / удовлетворяющих условиям поиска. Каждый элемент списка должен содержать следующие элементы:
1. Наименование паттерна, 60 символов (н-р: “Как настроить WiFi-роутер Dlink DIR-300 для работы с провайдером Onlime”). Возможно слово “Как” (“How”) должно определенным способом выделено (н-р, цветом)
2. Краткое описание паттерна, первые 180 символов
3. Автор паттерна
4. Тэги, которые указал автор паттерна (ссылками) *
5. Социальные кнопки Facebook, Twitter и др., с информацией о количестве человек поделившихся этим паттерном в соответствующих сетях. *
6. Дата публикации / последнего обновления паттерна *

* - данные элементы можно опустить, если того потребует дизайн

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

Страница паттерна

Основная функция страницы – дать возможность ознакомиться с выбранным паттерном.

Обязательные элементы страницы:

Наименование паттерна
Виджет с паттерном

Остановимся на виджете более подробно.

Под виджетом следует понимать компонент, который может быть встроен на любую веб-станицу любого стороннего сервису сайта, чтобы посетители этого сайта могли пользоваться контентом сервиса, не переходя на сайт самого сервиса. Примерами таких виджетов являются видеоролики Youtube или презентации SlideShare публикуемые на страницах форумов и блогов. В случае с Life Patterns виджет будет “проигрывать” слайды паттерна.

Паттерн должен одинаково выглядеть, что на сайте Life Patterns, что на стороннем сайте. Единственным отличием будет наличие/отсутствие наименования паттерна в шапке виджета (на сайте Life Patterns наименование будет элементом страницы, а не элементом виджета).

Конструкцию виджета можно разделить на две части:

проигрыватель
контент

Проигрыватель состоит из следующих элементов управления:

Наименования паттерна (наименование, в свою очередь, будет играть роль ссылки на домашнюю страницу паттерна)
Автора паттерна (опять же в виде ссылки на профиль пользователя в Life Patterns)
Счетчика слайдов (отображает порядковый номер текущего слайда, например в виде “5 /25” – что будет означать, что в данный момент виджет показывает пятый слайд из 25-ти)
Кнопок назад и вперед для навигации по слайдам. Каждая из них должна иметь два режима: активная/неактивная
Кнопки “сохранить в избранное”.
Социальных кнопок Twitter и Facebook, а так же кнопкой отправить по e-mail, с помощью которых пользователь может поделиться паттерном с другими.
Области для отображения слайдов паттерна

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

Линейная

Слайд 4

Слайд 3

Слайд 2

Слайд 1

Древовидная

Слайд 4.1

Слайд 3.1

Слайд 2.1

Слайд 1

Слайд 3.3

Слайд 4.3

Слайд 4.2

Слайд 3.2

Слайд 2.2

Циклическая

Слайд 4.1

Слайд 3.1

Слайд 2.1

Слайд 1

Слайд 4.2

Сами слайды в большинстве своем будут иметь следующую структуру:

Текст (до 300 символов, ибо редко когда пункты инструкций бывают длиннее)
Контент

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

Целевая аудитория

Целевой аудиторией являются активные интернет-пользователи 15-45 лет.

Требования к дизайну

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

Нужно реализовать в дизайне:

Домашняя страница
Страница категории / результатов поиска
Страница паттерна
Виджет
Базовый набор слайдов
1. Текст. Просто текстовый слайд (300 символов)
2. Текст + изображение. Текст, а под ним уменьшенное, если нужно, изображение
3. Текст + карта с маршрутом или метками. Текст а под ним гугло-карты с метками или маршрутами
4. Текст + видео. Текст, а под ним видеоролик c Youtube
5. Текст + список из вариантов. Это один из ключевых типов слайдов. Посредством слайдов этого типа будет производиться ветвление структуры паттерна. Слайд должен выглядеть как текст (например: “Для каких целей вам автомобиль?”) + список вариантов на выбор (например: 1. Ездить по городу 2. Ездить по бездорожью 3. Ездить по городу и бездорожью). При выборе одного из вариантов пользователь перемещается на соответствующий слайд.
6. Текст + контактная информация (реклама)

P.S. Попытка “не дизайнера” сделать сайт в стиле метро (может поможет понять куда следует идти). 

$c:\users\алексей\desktop\lifetemplates.png$

UPDATE 2

Я решил сэкономить мое и ваше время и максимально детально описал каждую из страниц. Текст разбавлен комментариями относительно ваших вариантов дизайна, комментарии начинаются с “#11” и “#9”.

Главная страница

На рис. 1 представлена принципиальная схема главной страницы.

$c:\users\алексей\desktop\homepage.png$

Где:

1 – шапка страницы

2 – описание сервиса

3 – закладки

4 – паттерны

5 – подвал страницы

Рис.

Разберем подробно каждый из блоков.

Блок №1. Шапка сайта

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

Анонимный пользователь должен видеть: лого, строку поиска и кнопку “Sign in”.

Зарегистрированный пользователь: лого, строку поиска, кнопку “добавить паттерн”, имя пользователя (или его юзерпик) и кнопку “Sign out”.

#9: Название сервиса лучше разделить на два слова и сделать его чуть более “легким”. Расстояние между шапкой и контентом слишком мало. Кнопку “Sign in” возможно (решайте сами) стоит оформить в виде ссылки (в интерфейсах WP7 и сайтах Microsoft больше используется почему-то такой вариант). “Find a pattern” можно опустить, а вместо него в самом поле ввода отображать пример запроса или пояснение как Фэйсбуке или Вконтакте. Может быть перед строкой поиска стоит поставить “How to” (решайте сами).

#11: Не стоит заморачиваться дизайном логотипа. Вероятнее всего название сервиса претерпит изменение, поэтому можно обойтись простой надписью подходящим шрифтом. Что касается входа в сервис, я решил, что не стоит перегружать шапку лишними элементами – достаточно ссылки “Sign in”. Поисковая строка смотрится неплохо, но не очень органично из-за желтого баннера справа. Желтый баннер, я так понимаю, относится к описанию сервиса – его мы обсудим ниже.

Блок №2. Описание сервиса

Под описанием имеется в виду баннер типа того, что можно наблюдать под шапкой на главной странице Loopt’а (https://www.loopt.com/). Текст баннера пока в разработке, но содержимое будет примерно таким же + большая кнопка/ссылка “Sign up”.

#9, #11: Нужно разработать баннер и расположить его согласно принципиальной схеме на рис.1.

Блок №3. Закладки

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

Закладки (“Bookmarks”) должны быть оформлены в виде метро-плиток и могут быть трех видов:

ссылка на список паттернов определенной категории
ссылка на список паттернов определенного автора
ссылка на список паттернов удовлетворяющих определенному поисковому запросу

Т.е. в блоке №3 у зарегистрированного пользователя могут соседствовать плитки категорий (н-р “Sport”, “Tourism”, “Food”), плитки отдельных авторов (н-р “John Galt”, “ Barack Obama”) и плитки с сохраненными запросами (н-р запрос “How to make lasagne”, сохраненный под именем “Lasagne”).

Вне зависимости от того, к какому виду относятся плитки, выглядеть они должны одинаково: наименование + бэкграунд (необязательный). Для категорий роль бэкграунда могут играть пиктограммы или любые другие изображения, для авторов – их фотографии. Наименование закладки может быть двустрочным и даже выходить за поля – это не страшно и абсолютно не мешает (как давний пользователь Windows Phone’a, смею вас в этом заверить).

Вернемся к описанию Блока №3 главной страницы.

Анонимные пользователи, зайдя на страницу, должны видеть закладки с популярными категориями. Закладки должны отображаться в две колонки, их общее количество не будет превышать 8-10 штук.

#9: Категорий, в конечном счете, будет много, и присваивать каждой из них свой цвет, наверное, будет лишним. Разным цветом можно отображать разные типы закладок (на ваше усмотрение).

#11: Отлично реализовано. Единственное, я бы поплотнее друг к другу плитки сделал и надписи сделал чуть мельче. Ну и “all categories” переобозвал бы в “more” и убрал бы стрелочку.

Блок №4. Паттерны

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

#9: Если рассматривать список паттернов, который на странице с результатами поиска, то к нему есть несколько замечаний. Текст можно сделать более крупным. Автор тоже должен быть в виде ссылки. Социальные кнопки здесь нужны для извещения пользователя о количестве лайков и публикаций данного паттерна в соответствующих социальных сетях, т.е. нужен вариант лого соцсети + цифра.

#11: Отлично реализовано, за исключением нескольких штрихов. Кнопка “Read more” встречается в метро-интерфейсах только в контексте “показать больше элементов” списка. Доступ “внутрь” элементов списка производится по клику на сами элементы, а в нашем случае на их заголовки. При этом заголовки, по идее, должны быть цвета остальных ссылок на странице, чтобы вызывать соответствующие ассоциации. “Show more results” лучше сделать ссылкой, я думаю.

Блок №5. Подвал сайта

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

#9: Подвал немного захламлен.

#11: Идеальный подвал.

Страница “Список паттернов”

$c:\users\алексей\desktop\homepage1.png$

Где:

1 – шапка страницы

2 – закладки

3 – паттерны

4 – подвал страницы

Рис. 2

Данный шаблон будет использоваться следующими страницами:

Главной страницей в режиме для зарегистрированных пользователей
Страницей категории
Страницей с результатами поиска
Страницей с паттернами определенного автора

Т.е. любая закладка будет вести на страницу, реализованную на базе этого шаблона. На рис. 2 представлена принципиальная схема такой страницы. Шапка и подвал сайта описаны выше, поэтому разберем только особенности блоков №№2,3.

Блок №2. Закладки

Отличий закладок на данной странице от закладок на главной практически нет. Можно отметить лишь следующее:

Закладок может быть неограниченное количество
Перечень закладок формируется пользователем под свои нужды и может состоять из закладок любого типа
Должна присутствовать обязательная закладка “Home” для быстрого перехода на главную страницу и закладка “Favorites”.

#9, #11: Требуется добавить данный блок на соответствующие страницы, а лишнее убрать.

Блок №3. Паттерны

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

Можно назвать три основных отличия:

Под наименованием (или где-то рядом) должна располагаться кнопка “Add to bookmarks”
Под наименованием писка должны располагаться табы (“tabs”) - аналоги “WP7 Pivot items” – “Top”, “New” и т.п. (как пример – категории писем на этой картинке http://bit.ly/KVqXee )
Наименование может выглядеть по-разному: ”John Galt” patterns (где имя пользователя – ссылка на его профиль); “Tourism”; Search results for “How to make lasagne” (где сам текст запроса как-то выделен).

Не забудем про “Show more patterns” для подгрузки новой порции паттернов и отличия на этом заканчиваются.

#9: Очень понравилось “search result for …” на странице с результатами поиска, но боюсь, в данном стиле придется сделать табы, а наименование сделать шрифтом побольше и с заглавными.

#11: О том, что список выглядит отлично, я уже говорил – вам нужно лишь поработать над шапкой списка, добавив в нее недостающие элементы.

Страница паттерна

Описание страницы, фигурирующее в первоначальной версии брифа, актуально и сейчас. Добавлю лишь несколько пожеланий:

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

Пример организации пространства в виджете можно посмотреть на рис.3.

Рис. 3

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

#11: Вам так же нужно перерисовать виджет и слайды в соответствии с озвученным выше списком. Социальные кнопки нужно вынести за основную область. Слайд с выбором вариантов не подразумевает множественного выбора. По пиктограмме“Send to email” не очень понятно, что она делает.

Оглавление

Описание продукта

Домашняя страница

Страница категории / результатов поиска

Страница паттерна

Целевая аудитория

Требования к дизайну

UPDATE 2