Проектирование интерфейса сайта

Как создать хороший интерфейс сайта?

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

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

Главное, чтобы интерфейс был интуитивно понятным, и пользователю не требовалось объяснять, как им пользоваться.

Теперь перенесем эти факторы на любой интернет-ресурс. Интерфейсом будут различные вкладки, сервисы и прочие возможности (допустим, скачивание видео).

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

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

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

Грамотный подход включает в себя:

  • анализ аудитории. Составив портрет среднестатистического юзера, можно создать наиболее подходящие условия;
  • создание эскиза функций будущей площадки. Нужно заранее продумать возможности, чтобы можно было обеспечить воплощение идеи в жизнь;
  • концепцию. Проектировщик должен иметь представление о том, что получится в итоге;
  • создание структуры. Представляет собой 2 стадию процесса. О нем говорилось в предыдущем пункте;
  • оформление. Именно на этом этапе к процессу подключается дизайнер;
  • тестирование. Если обнаруживаются какие-то ошибки, их надо устранить. Когда проверка закончена, запускайте сайт в Интернет.

Преимущества использования грамотно созданного интерфейса

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

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

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

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

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

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

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

Каковы этапы разработки интерфейса сайта?

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

Отметим, что предложенные варианты разделения не являются всеобщим критерием. Любую стадию можно разделить на подэтапы, а те, в свою очередь, на подподэтапы. Таким образом, работа выглядит еще глубже и сложнее – и тем самым дороже и привлекательнее для заказчика 🙂

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

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

На этапе проектирования создается тестовая версия сайта, т.е. весь функционал распределяется по страницам. На этапе проектирования веб-дизайнер:

  • принимает решение относительно того, где именно будут находиться кнопки и текстовая составляющая;
  • определяет, каким образом будут сгруппированы элементы;
  • продумывает поведение элементов и микротекст.

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

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

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

Однако мы можем отдать прототип с комментариями в виде документа Word – для нас это несложно и, конечно же, включено в стоимость работ.

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

На этом этапе дизайнер:

  • принимает решение относительно того, какими будут сетка, цвета, шрифты и фон;
  • часто продумывает нестандартные элементы управления (например, выпадающие меню и т. п.).

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

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

На этапе имплементации происходит разработка и QA-тестирование интерфейса сайта. Мы на 100 % уверены: разработчикам будет понятно, что и как делать, исходя из графических файлов (скетчей) и пояснений к ним, которые мы предоставим. Если же возникнет необходимость, мы готовы дорисовать и дописать.

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

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

Обычно мы советуем заказчикам проводить удаленное юзабилити-тестирование сайта. Оно имеет ряд преимуществ – быстро (2-7 дней на тест), доступно (на один-два порядка дешевле крупных исследований), а также в рамках вашей целевой аудитории. Нужны американцы из Техаса 55 лет, которые хотят найти русских невест? Пожалуйста!

Юзабилити-тестирование эффективно как для прототипа, так и для уже готового сайта. Мы рекомендуем вместо одного масштабного теста делать много небольших итерационных. Сделали, провели тесты, внесли корректировки, затем снова протестировали. Благодаря этому можно вовремя обнаружить и исправить ошибки, не заметные с первого взгляда.

Время выполнения работы зависит от необходимого числа страниц сайта. Заметим, что на проектирование и разработку дизайна одной страницы необходимы одинаковые временные затраты. Как правило, нам нужно два рабочих дня для создания прототипа (или же дизайна) одной страницы и пять дней для оформления всего заказа. То есть, за 15 рабочих дней мы можем спроектировать (или разработать дизайн) 5 страниц сайта.

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

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

Проектирование и дизайн одной страницы сайта имеют одинаковую стоимость:

  • проектирование/дизайн первой страницы стоит 48 800 р. Она имеет большую цену за счет того, что именно первая страница определяет вид всего сайта и должна учитываться вся его структура;
  • проектирование/дизайн остальных страниц18 350 р. за каждую.

Таким образом, разработка прототипа (или дизайна) пяти страниц будет стоить 48 800р.+18 350р. х 4 = 122 200р.

Примерная стоимость юзабилити-тестирования 52 500р. – 126 000р.

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

  • чат;
  • интерфейс голосового общения;
  • интерфейс общения с видео;
  • управление списком контактов;
  • и так далее.

Для любого из этих модулей имеет смысл пройти все этапы, после чего можно переходить к следующему модулю. Данный метод разработки имеет название Agile («эджайл»). Эта методология пользуется большим уважением, и о ней можно говорить всякий раз, когда хочется впечатлить заказчиков и красивых девушек:-)

Проектирование/Дизайн

Могу ли я заказать только дизайн без проектирования?

Этапы разработки интерфейса программы. Сроки. Цены.

Сколько времени займет разработка дизайна для моего приложения?

В каком формате я получу дизайн?

Примеры дизайна пользовательского интерфейса.

Вы предоставляете разработчикам сопроводительную документацию?

Вы можете проверить корректность имплементации вашего дизайна разработчиками?

Вы занимаетесь прототипированием интерфейса пользователя под Android?

Зачем нужны юзабилити-тесты, если есть гениальный дизайнер интерфейса?

Что входит в стоимость одного экрана?

Почему первый экран стоит намного дороже, чем остальные?

Если впоследствии я закажу еще экраны, останется ли в силе ставка для первого экрана?

Почему ваши цены выше, чем у других дизайнеров интерфейсов на Free-lance.ru?

Все о форматах, размерах, ценах и правовых вопросах

Различные варианты оплаты

VisualPharm на других языках: espanol, English.

Курсовая работа — Проектирование интерфейсов для сайта — файл n1.docx

Доступные файлы (1):

n1.docx

Кафедра автоматизированных систем

Проектирование сайта «Летние страны»

Выполнил студент группы ____________

Human-centred design: ISO 9241-210 [7] – существующий стандарт проектирования. В новом варианте имеются существенные изменения касаемые приоритетов стандартизиуемых процессов. 8

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

«Летние страны» — компания, специализирующаяся в организации туров в такие страны как Тайланд, Черногория, Хорватия, Египет, ОАЭ, Индонезия, Бали и Сингапур и др.

Спроектировать сайт туристической компании «Летние страны».

3. Методологии и технологии проектирования опыта взаимодействия

Термин UX впервые упоминается в публикации Эдвардса (E. C. Edwards) и Кейсика (J. Kasik) «User Experience With the CYBER Graphics Terminal» в 1974 году. В конце 70х начале 80х годов термин начинает широко использоваться в контексте методологии user-centered design (UCD). В 1993 году Дональд Норманн (Donald Norman), как лицо очень популярное в те времена, вызвал повышенный интерес к термину UX, самопровозгласив себя User Experience Architect.

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

3.2. Методология проектирование опыта взаимодействия

Джесс Гаррет в своей книге «Веб-дизайн. Элементы опыта взаимодействия» [1] представляет проектирование опыта взаимодействия в виде 5 уровней (рис. 1) Эти пять уровней – стратегия, набор возможностей, структура, компоновка и поверхность – составляют концептуальную основу для обсуждения связанных с опытом взаимодействия проблем и средств их решения.

3.3 Подходы к проектированию опыта взаимодействия

3.3.1 Проектирование, ориентированное на пользователей (User Centered Design)

User Centered Design (UCD), являлся стандартом проектирования ISO 13407 [6] до 2009 г.

активным вовлечением пользователей в процесс проектирования и тестирования продукта;

четким пониманием пользовательских требований и задач;

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

итеративностью и мультидисциплинарностью подхода.

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

3.3.2 Человекоориентированное проектирование (Human Centered Design)

Human-centred design: ISO 9241-210 [7] – существующий стандарт проектирования. В новом варианте имеются существенные изменения касаемые приоритетов стандартизиуемых процессов.

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

понимать и учитывать контекст использования (включая характеристики пользователей, задач и среды);

направлять процесс проектирования в соответствие с пользовательскими требованиями;

создавать решения, которые соответствуют этим требованиям;

проводить оценку решений с привлечением пользователей с изменением решений в соответствие с выявленными недостатками.

Human-centred design учитывает не только процесс взаимодействия пользователя с системой, но и контекст, т.е. каким образом человек будет с ней взаимодействовать (например, взаимодействие с сайтом родителей школьника, который пользуется сайтом и др.)

3.4.3 Проектирование, ориентированное на цели пользователей

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

3.4.1 Проектирование, основанное на анализе деятельности пользователей (Activity Centered Design)

Автором этого подхода является Дональд Норман, он критикует человекоориентированный подход в своей статье. [8]

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

Сегодня не существует единой методологии проектирования интерфейсов, поэтому при проектировании данного проекта, используется сочетание различных подходов. В общем виде процесс проектирования разбит на 3 этапа (рис. 4):

4.1 Анализ бизнес-целей сайта

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

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

Увеличить число повторных обращений (доля от общего числа обратившихся клиентов).

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

Создать высоко лояльное сообщество клиентов (увеличение числа обратившихся без рекомендаций только с сайта).

4.2.1 Разработка персонажей

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

Подобрать тур на определённый период времени.

Подобрать тур высокого уровня для своей семьи.

Подобрать тур: всё включено.

Простота оформления тура.

Требования к сайту:

Простота поиска нужной информации.

Подробное описание отелей.

Возможность подбора тура на определённый период времени.

Евгений Рубин(второстепенный персонаж)

Подобрать тур на определенную сумму.

Выяснить детали поездки.

Найти надёжного туроператора, т.к. выезд за границу впервые, не известны детали поездки.

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

Подробная информация о турах – фото, сервис, цены.

Дополнительная информация о поездке – погода, виза, экскурсии и др.

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

Могу ли я доверять им?

Как я быстро могу подобрать тур для своей семьи?

Есть ли тут интересующие меня курорты

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

На какую аудиторию ориентирован?

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

На какой курорт тур.

Возможность подать заявку на тур или связаться с сотрудниками компании.

Какие есть дополнительные услуги.

Перелёт и др. формальная информация.

Возможность сравнить туры.

Куда мне предлагают съездить?

Хорошие предложения готовых туров с ценами, скидки.

Что особенного в этой стране, что я могу посмотреть?

Контакты. В каком городе офис, как можно связаться.

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

Удобный переход с одного курорта на другой.

Описание курортов, на какую аудиторию ориентированы.

Климат, погода сегодня.

Что особенного на этом курорте.

Где именно я могу отдохнуть, как посмотреть отели?

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

Класс отеля и примерная стоимость.

Что входит в стоимость.

Как я могу попасть в этот отель? – поиск тура.

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

Возможность подать заявку на тур или связаться с сотрудниками компании.

Какие есть дополнительные услуги.

Перелёт и др. формальная информация.

Возможность сравнить туры.

Информация для туристов:

Кратная информация о стране (деньги, время, язык и др.)

Согласно требованиям сценариев, информация группируется в понятном и удобном для пользователя виде.

4.4 Разработка аннотированных макетов

Для формирования структуры страниц сайта и функциональных аспектов поведения на них были созданы макеты страниц (рис.5).

4.5 Итоги проектирования сайта

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

Заключение

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

Веб-дизайн. Книга Дж. Гарретта. Элементы опыта взаимодействия: Дж. Гарретт — Санкт-Петербург, Символ-Плюс, 2008 г.- 192 с.

Алан Купер об интерфейсе. Основы проектирования взаимодействия: Алан Купер, Роберт Рейман, Дэвид Кронин — Москва, Символ-Плюс, 2009 г.- 688 с.

Dirk Knemeyer, Eric Svoboda. User Experience – UX//Interaction-Design.org,

ISO 13407:1999. Процессы проектирования для интерактивных систем, ориентированные на человека URL: http://www.iso.org/iso/ru/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=21197 (Дата обращения 01.06.11)

ISO 9241-210. Эргономика взаимодействия человек-система. Часть 210. Сконцентрированное на человеке конструирование интерактивных систем, URL: http://www.iso.org/iso/ru/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=52075 (Дата обращения 01.06.11)

UX-дизайн. Практическое руководство по проектированию опыта взаимодействия: Расс Унгер, Кэролайн Чендлер — Санкт-Петербург, Символ-Плюс, 2011 г.- 336 с.

Как создать хороший интерфейс сайта
Правильно спроектировать интерфейс — значит заработать много клиентов! Роль играют удобная навигация, красивый дизайн и другие факторы, о которых расскажут seo специалисты Аполло-8.
http://www.apollo-8.ru/proektirovanie-interfeysov
Каковы этапы разработки интерфейса сайта
Разработка иконок Windows 7 для разработчиков программ для Windows. А также — веб дизайн, создание логотипов и иллюстраций. — Мы делаем проектирование интерфейса, дизайн, программирование и юзабилити-тестирование для веб и мобильных.
http://www.visualpharm.ru/design_faq/stages_website_interface_development.html
Курсовая работа — Проектирование интерфейсов для сайта — файл
Название: Курсовая работа — Проектирование интерфейсов для сайта; Файл: n1.docx; Дата: 01.06.2012 15:09; Размер: 2437kb.
http://nashaucheba.ru/v28180/%D0%BA%D1%83%D1%80%D1%81%D0%BE%D0%B2%D0%B0%D1%8F_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B0_-_%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D1%84%D0%B5%D0%B9%D1%81%D0%BE%D0%B2_%D0%B4%D0%BB%D1%8F_%D1%81%D0%B0%D0%B9%D1%82%D0%B0

COMMENTS