Mockup
Upcoming SlideShare
Loading in...5
×
 

Mockup

on

  • 186 views

 

Statistics

Views

Total Views
186
Slideshare-icon Views on SlideShare
180
Embed Views
6

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 6

http://www.slideee.com 5
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Mockup Mockup Presentation Transcript

    • Mockup (мокап) первый шаг на пути к интерфейсу
    • UI – User Interface UX – User eXperience Что такое интерфейс?
    • Назначение интерфейса получить от пользователя информацию, необходимую для достижения желаемого результата или решения поставленной задачи. - Слушаюсь и повинуюсь, мой Господин!
    • – степень эффективности, продуктивности и субъективной удовлетворенности, с которыми продукт может быть использован определенными пользователями в конкретном контексте использования для достижения заданных целей субъективной Что такое юзабилити?
    • Сложный или простой?
    • Сложный = плохой?
    • +100500 совершенно разных товаров Простой = хороший?
    • Сложный интерфейс Не интуитивен, трудно понимаем, усложняет или делает невозможным решение поставленной задачи. Простой интерфейс Интуитивно понятен, упрощает решение задачи, помогает и подсказывает нужные действия В чем разница?
    • Другое дело! 
    • Визуализация идеи Тестирование идеи на этапе проработки Изменение и доработка без потери ресурсов Для чего нужен мокап?
    • Набросок на бумаге или доске, аппликация PRO: быстро нарисовать легко исправить CONTRA: сложно делиться сложно обсуждать сложно сохранить Электронная версия PRO: быстро нарисовать легко исправить просто делиться просто обсуждать просто сохранить CONTRA: ??? Способы создания мокапа
    • MS PowerPoint И т.д. и т.п…. Инструменты
    • Основные элементы
    • Текстовое поле (Text Input / Text Field) Назначение • Ввод информации с клавиатуры Поиск Google Адресная строка браузера Форма входа в Приват24
    • Когда использовать • Количество возможных вариантов → ∞, но при этом мы почти всегда знаем, что именно вводит пользователь, и мы готовы обработать эту информацию Текстовое поле (Text Input / Text Field)
    • «Ограничители» и подсказки • Ограничение ввода (только цифры или буквы, ограничение по количеству вводимых символов и т.д.) • Проверка информации по мере ввода • Скрытие вводимых символов (пароль) • Выпадающий список с подсказками Ввод номера телефона в Приват24 Пароль пользователя в Ubuntu Новый твит в Twitter Поиск сотрудников в ПриватПерсонале Текстовое поле (Text Input / Text Field)
    • EPIC FAIL  • Пользователь не понимает, что мы от него хотим • Объем информации, которую мы просим ввести, превышает все разумные нормы • Мы не в состоянии корректно обработать введенную информацию • Не используем «ограничители» и подсказки Facepalm Текстовое поле (Text Input / Text Field)
    • Выпадающий список (Droplist / ComboBox) Назначение • Выбор данных из заранее подготовленного набора Регистрация в Skype Расширенные настройки браузера Chrome Выбор местоположения в ПК «Проминь»
    • Выпадающий список (Droplist / ComboBox) Выбор месяца рождения при регистрации в SkypeКогда использовать • Существует конечное число возможных вариантов • Каждый из вариантов можно интерпретировать как значение или величину одного и того же типа • Из возможных вариантов предусмотрен выбор только одного Выбор размера шрифта в настройках браузера Chrome
    • EPIC FAIL  • Количество возможных вариантов слишком велико • Набор вариантов не оптимизирован • Варианты не отсортированы Facepalm Выпадающий список (Droplist / ComboBox)
    • Радио-кнопка (Radio Button) Настройки видео в Skype Назначение • Выбор одного из нескольких предлагаемых вариантов (режимов) Оплата телефонной связи в Приват24 Настройки браузера Chrome
    • Радио-кнопка (Radio Button) Когда использовать • Количество возможных вариантов не больше 6-7 (чаще всего достаточно 2-3) • Возможные варианты чаще всего являются режимами работы системы и не принадлежат какому-то конкретному типу значений или величин • Все варианты взаимоисключающие Настройки видео в Skype Оплата телефонной связи в Приват24 Настройки браузера Chrome
    • EPIC FAIL  • Использование вместо выпадающего списка там, где это не нужно (для выбора значений или данных) • Количество вариантов > 7 (слишком сложно) • Варианты не отсортированы Facepalm Радио-кнопка (Radio Button)
    • Флажок (Check Box) Настройки учетной записи в браузере Chrome Назначение • Выбор нескольких предлагаемых вариантов (режимов) Перечень документов Google Drive Настройки уведомлений в Skype
    • Флажок (Check Box) Настройки учетной записи в браузере Chrome Когда использовать • Возможные варианты чаще всего являются режимами работы системы, признаками, свойствами, событиями, явлениями или объектами • Варианты являются дополняющими друг друга и не конфликтуют между собой • Количество возможных вариантов ограничено Перечень документов Google Drive Настройки уведомлений в Skype
    • EPIC FAIL  • Объединение разных по сути вариантов в одну группу • Варианты не отсортированы Facepalm Флажок (Check Box)
    • Кнопка (Button) Регистрация в Приват24 Назначение • Кнопка = действие Написание письма в GMail Отправка сообщения в Skype
    • Ссылка (Link) Ссылки в результатах поиска Google Назначение • Ссылка = переход
    • СПАСИБО!  Вопросы