Интернет-Бизнес

Интернет бизнес технологии
вводный
Подход
Важно учесть:
• Удобство пользования;
• Представление информации;
• Технологические особенности;
• Художественное решение;
Близкие области
•Дизайн журналов, газет (цветовые
решение, информационное
представление)
• Автомобильный дизайн (удобство
использования, требования
скорости работы)
Интернет бизнес технологии
Вводный
Удобство использования
Usability
Этап проектирования
•Цель проекта
•Целевая аудитория проекта
•Требования к проекту:
• к информационному наполнению
• к функциям
• к представлению информации
• к внешнему виду.
Дизайн страницы
Общее.
• Общий принцип дизайна страниц – принцип
Оккама. Просматриваем элементы дизайна и по
очереди удаляем их. Если дизайн без этого элемента
не нарушился – значит можно обойтись без него.
• Пустое место вредно. Его можно заполнить
полезной информацией.
• Пустое место полезно. Оно позволяет отделить
блоки информации, дизайна друг от друга
• Навигация должна занимать не более 20 % от
площади экрана.
Дизайн страницы
• Общий принцип дизайна страниц – принцип Оккама.
Просматриваем элементы дизайна и по очереди удаляем
их. Если дизайн без этого элемента не нарушился –
значит можно обойтись без него.
• Пустое место вредно. Его можно заполнить полезной
информацией.
• Пустое место полезно. Оно позволяет отделить блоки
информации, дизайна друг от друга
• Навигация должна занимать не более 20 % от площади
экрана.
Дизайн страницы
Разрешение и размеры
• Вы НЕ ЗНАЕТЕ, как и с помощью чего
пользователь будет просматривать ваши страницы;
• Значит, дизайн не должен зависеть ни от разрешения
экрана, ни от размера монитора.
• Главное здесь - всегда использовать в таблицах,
фреймах, шрифтах относительные размеры;
• Учитывайте разрешения в графических элементах.
Они должны быть читабельны и на высоком и на
низком разрешении
Дизайн страницы
Информация и обрамление
• В дизайне максимально разделяйте визуальные
элементы и информацию;
• Это существенно облегчит вам в последующем
обновление сайта;
• Это существенно облегчит перевод сайта из HTML в
системы управления содержанием и базы данных;
• Следуйте общепринятым стандартам.
Дизайн страницы
Быстрота загрузки
• Быстрая загрузка – основной критерий дизайна
страницы.
• Сколько ждать? (Robert B. Miller, Fall Joint computer
conference, 1968): менее 10 с – предел удержания
внимания пользователя. Максимальный предел – 20 с.
(правило 20 секунд)
Дизайн страницы
Быстрота загрузки
• Времени загрузки менее 10 с соответствует размер
файла менее 35 Кб
•Предсказуемое время загрузки (если размер файла
более 50 Кб)
• Консервативное использование графики. Удалите
графику – увеличится трафик
• Дайте пользователю информацию сразу;
• Данные вверху страницы должны иметь смысл
• Изображения должны подписываться
Дизайн страницы
Ссылки
•Ссылки бывают:
•Структурные (навигационные);
• ассоциативные (поясняющие);
• списки «смотри также»;
• Забудьте фразу «щелкните здесь»!!!, Подчеркивайте
информационно – значимые слова;
• Ссылки не должны быть длиннее 4 слов;
• Дайте достаточно информации для выбора ссылки;
• Сохраните расцветку посещенных и непосещенных
ссылок.
Дизайн страницы
Фреймы.
• Это плохо.
• Фреймы нарушают концепцию уникальности адреса
URL
• Фреймы
всегда
занимают
какое-то
место,
независимо от размера окна.
• Поисковые системы с трудом понимают фреймы
•Фреймы допустимы: для навигации внутри
страницы (большие списки).
Интернет бизнес технологии
Разработка информационного наполнения
Информационное наполнение
Авторские права и копирование.
Брать или не брать?
Старайтесь написать текст самостоятельно;
 Плагиат («клонирование» - А. Лебедев)
 «Fair
using»
(«Честное
использование»)
Постарайтесь найти автора и спросить у него
разрешения. (даже если нет знака (с)). Не
злоупотребляйте
использованием
авторского
материала.
 Пародия, ирония;
 Формат (новостной, электронный магазин) - Глупо
утвердать, что «Известия» - плагиат с «Правды»
Информационное наполнение
Создание текста
 Лаконичность. На страницах должно размещаться
не более 50% того текста, что может быть
использован для печатного издания Т.к. скорость
чтения текста с экрана на 25% медленнее, чем с
бумаги;
 Удобство для беглого ознакомления. Используйте
короткие абзацы, маркированные списки;
 Небольшая
длина
страниц.
Информацию
большого объема нужно разбивать на несколько
страниц, связанных гиперссылками;
 Нужен редактор.
Кто-то должен отвечать за
качество информационного наполнения сайта.
Информационное наполнение
Стиль беглого ознакомления
 Пользователи Интернета очень ценят свое время и
не любят копаться в содержимом страницы;
 До 80% пользователей «читают по диагонали», по
ключевым словам, заголовкам и т.д. Почему?
 Структурируйте статьи с использованием
подзаголовков 2-го и 3-го уровня.
 Заголовки должны быть максимально
информативными. Ставьте информацию на первое
место. Не поддавайтесь на броские формулировки
Информационное наполнение
Четкость формулировок.
 Используйте принцип «перевернутой пирамиды»:
Число посетителей
Общедоступная информация, «выжимки»
ссылки
homepage
Более детализованная информация
Раздел
(для заинтересовавшихся)
ссылки
Подраздел
Детальная, специализированная
Информация (для специалистов)
Информационное наполнение
Распределение информации по веб-страницам
Распределение должно вестись не линейно (по
длине страниц), а по логической структуре текста;
 Пользователь должен сам выбирать, что ему нужно
загрузить;
 При проектировании структуры ориентируйтесь на
цели сайта и аудиторию посетителей;
Снова используйте принцип «перевернутой
пирамиды»:
 сначала дайте лаконичную резюмирующую информацию;
 подробные описания вынесите на вторичные страницы ;
 На
вторичные
страницы
ходят
заинтересованные пользователи (ок. 10%);
только
Информационное наполнение
Удобочитаемость
 Если пользователь не в состоянии прочитать текст,
все остальное бессмысленно;
 Контраст текста и фона;
 Однотонный
фон.
Фоновые
изображения
затрудняют чтение;
 Основной текст должен иметь достаточно крупный
шрифт. Естественно, в разумных пределах
 Текст должен быть статичным. Анимированный
текст воспринимается очень тяжело;
 Английский текст выравнивается влево, русский –
по ширине (justify).
Центрирование и отбивка вправо – для выделения
текста.
Информационное наполнение
Мультимедиа
Мультимедиа – отличное средство презентации
Помните про «время ответа системы».
Сделайте его предсказуемым;
 Используйте новые мультимедийные технологии
консервативно.
 Дайте возможность предварительного просмотра и
и аннотации без загрузки всей презентации;
Дайте выбор: Создайте галерею в HTML,
иллюстрирующую мультимедиа презентацию.
 Еще раз удивитесь консерватизму большинства
пользователей.
Навигация.
• Навигация должна быть на каждой странице сайта
• Польза и вред метафоры. Метафора не всегда
понимается однозначно
• Три вопроса к навигации
• Где я сейчас нахожусь (на каком сайта и на какой странице
сайта)?
• Где я уже был? Оставляйте стандартные цывета
посещенных ссылок
• Куда я могу пойти ?
• Навигация должна занимать не более 20 % от
площади экрана.
• Все уровни навигации желательно отображать на
сайте