WEB UI Basics

Lesson 1 - Overview

Alex Perez Tchernov

Общая структура

Общая структура

• Пользователь• Браузер как контейнер (HTML, JS, CSS,

внутренние возможности, File System, расширения, сетевой стек, потоки)

• Среда доставки (прокси, DNS, Промежуточный кеш, другое..)

• Фронтенд• Бэкенды, Среды коммуникации...

Пользовательское восприятие

Пользовательское восприятие

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

Пользовательское восприятие

2. Назовите несколько «главных» сообщений, передаваемых сайтом. А имено, на что вы обратили внимание при первоначальном посещении. Чем вы «увеклись», что захотели посмотреть. Какие ощущения остались после посещения сайта, что «запомнилось».

Пользовательское восприятие

3. Насколько «цельным» и «ценным» оказался сайт. А именно, навигация, функциональность, оформление, представленные материалы, тексты – были ли выполненные в согласованной манере. Заметили ли вы что- то «мешающее» согласованному восприятию сайта. Получили ли вы какую-то информационную или эмоциональную ценность от сайта.

Пользовательское восприятие

Этапы

Профессии в области UI / UXInformation Architect / Usability Architect / WebSite Information Architect / User Experience Architect

Senior User Research Specialist / User Experience Researcher / Usability Analyst

Usability Engineer / Principal Product Definition Engineer

User Experience Designer / User Interface Designer / Product Designer / Interaction Designer / User Interface Software Engineer / Web Designer (Web Design Developer)

Ключевые обязанности• Роль «адвоката человеческого фактора». Понимание одновременно требований бизнеса и требований к разработке продукта, в т.ч. с точки зрения HCI; Хорошие коммуникативные и презентационные навыки.

• Анализ пользовательских характеристик интерфейсов (тестирование, оценка и пр.) Планирование и проведение исследований, умение собирать данные и обрабатывать их с помощью опросов, экспериментов. Владение методами: task analysis, contextual inquire, heuristic evaluations, user interface design, user research, concept testing, usability testing, benchmark studies, competitive evaluations, participatory design sessions, ethnographic field studies, user surveys, heuristic evaluation;

• Прототипирование / дизайн / верстка / кодирование

sigchi.ru/Seminars/03/S03_Kryuchkov.ppt

Этапы

From Usability.gov

Браузер как контейнер

Возможности браузера

• Отображение HTML• Выполнение JS• Использование CSS• Использование сетевого стека• AppCache, WebStorage (local / session), WebSQL

/ IndexedDB, File APIs, Geolocation API, WebRTC + Audio, Canvas (GPU), WebWorkers, WebSockets

• NAPI

Пример «расширения» (WebRTC)

Возможности браузера

• HTML + CSS• HTML + CSS –> JS • HTML + CSS –> JS -> AJAX -> HTML (DOM)• HTML -> JS …

• Semantic Markup + (extensions) • XSLT

Под нагрузкой

• Worst / Average / Almost Always• Загрузка по требованию (js / data) или

prefetching (опережающая) • Паковка в нужные блоки (js), компиляция

(LESS, Closure Stylesheet, Closure, GWT), сжатие

• Асинхронные вычисления (подготовка данных) - webworkers, templates, json

• Хранение данных на клиенте• Форматы данных (protobuf, json, binary)

Среда доставки

Между браузером и сервером

• Прокси с кешем (etag, expiration, URLs)• CDN• WebRTC (Peering) + STUN• DNS, BIG IP

Фронтенд

Фронтенд

• Отдача статики (js, css, части html)• Проксирование на бэкенды• Выполнение SSI вставок• Выполнение шаблонизации• Работа с кешем (иерархия, переполнение,

обновление, заполнение, политика устаревания)

• Кластеризация (+ часто до фронтенда)

Бэкенды

Бэкенды и процесс сборки для занятий

• Передаю тривиальный REST Interface (GET, POST, PUT, DELETE) + URL + Автосгенерированная документация.

• Инструменты сборки JS • Инструменты тестирования• Инструменты дебага• Инструменты размещения • Инструменты * версионирования