how to improve mobile ui/ux

Как улучшить

UI/UX в мобильном

приложении

2017

Апостол Николай

Estimation

Роберт Мозес

User personas

Estimation

Камденская лавка

Это шедевр "неприятного дизайна"

Estimation

McDonald's

Estimation

Heathrow Airport

Terminal 5700 мест для почти 35 млн пассажиров

единственный способ присесть - это посетить

один из 25 ресторанов

Estimation

Эскалаторы

Вынуждают пройти

несколько дополнительных магазинов

на каждом этаже

2017

UX/UI Designer

2017

«Сделайте красиво»

2017

Dribbble

2017

Эстимация всего проекта до воркшопа может

обернуться крахом и по дедлайнам, и по качеству. Ведь

именно в рамках воркшопа выясняется реальный объем

работ.

Estimation

Эстимация всего проекта до воркшопа может

обернуться крахом и по дедлайнам, и по

качеству. Ведь именно в рамках воркшопа

выясняется реальный объем работ.

Estimation2017

Оценка проекта

Идеальное

состояние

Пустое

состояние

Состояние

ошибки

Состояние

частичной

заполненности

Состояние

загрузки.

Склет

Estimation2017

Пустые состояния

Первый

запуск

Все данные

удалены

Нет данных

для отображения

например

результат поиска

Project Manager

Project Manager not Premier Manager

Estimation

MVP and Design Sprints

Microinteractions

2017

Microinteractions

Microinteractions

Dan Sffer

Microinteractions

Детали — это и есть дизайн

Dan Saffer

Детали

Microinteractions

2017

Детали

Microinteractions

Детали

Mobile UI/UX details

Microinteractions

No Feedback

Microinteractions2017

это то, что

приводит людей к

вашему продукту

Фунционал

это то, что их

удерживает

надолго

Детали


Feedback


Mircointeractions

Передают отклик

или результат

действий

пользователя

Выполняют

индивидуальную

задачу

Улучшают

чувство прямой

манипуляции

Помогают

пользователю

визуализировать

результаты своих

действий и избегать

ошибок.

01 02 03 04

Microinteractions

Turn off mode


Визуальные

подсказки. Призыв

или намек к

действию

Trigger

Правила

определяют, что,

как и в каком

порядке может

происходить

Rules

Обратная связь

поясняет


правила.

Используйте юмор.

Feedback

Циклы продлевают

жизнь

микровзаимодейст

вий

Loops&Mods

Microinteractions

Дизанер

2017

Пользователь

Microinteractions

Trigger

2017

Microinteractions

Trigger


Звук Гироскоп Вибрация Время суток,

геопозиция,

режим

телефона...

Microinteractions

Loop&Mods

2017


Prevent Human Error


Audio Feedback

Звуки помогают

передать фидбек

Аудио добавляет

персонализации

в приложение

Microinteractions

Camera First

2017

Microinteractions

Progressive

disclosure

Важный контент

в приоритете

Чистый и

упрощенный

интерфейс

Меньше ошибок

происходит

Но, Нужно знать

своих пользователей

Microinteractions

Progressive

disclosure

Novice users

Advanced users

Microinteractions

Progressive

disclosure

show less, provide more

Microinteractions

Progressive

disclosure

Microinteractions

Trigger

2017

Telegram

Voice messages



Гироскоп


Пресеты

и повторения

2017

Мелочи

Microinteractions

Overlapping

2017


Поощрение

Microinteractions

Drunk Mode

Cognitive Load

2017

Cognitive Load

Cognitive Load

это количество логических связей и

переходов, необходимых нашему

мозгу для осознания и понимания

объекта, на который мы смотрим.

Cognitive load2017

QR

Cognitive load2017

Fingerprint

Cognitive load

Берлинский

ключ

2017

Cognitive Load

Primary Actions

2017

Cognitive Load

Segmented

control

2017

Cognitive Load

Toggle menu

2017

Cognitive Load

Catalog

improvements

2017

Cognitive Load

Swipe to Order

2017

Cognitive Load

Show password

2017

Cognitive Load

Show password

2017

пользователей используют

такую возможность

75%

Cognitive Load

Required fields

2017

Cognitive Load

Сolor matters

2017

Cognitive Load

Сolor and Depth matter

2017

Trigger

2017

iOs Music


Improvements

Размер шрифта и

эелементов

2017

проверяйте дизайн на

телефоне и не уменьшайте

текст

Improvements2017 Improvements

Accessibility

и конфликт ценностей

2017

Brain

2017

С возрастом мозг замедл

яется и все

чувства притупляются.

Транзишены сделали

медленнее.


Двойное

оповещение

2017 Mobile UI/UX details

Target Size

2017

Error Rate


Improvements2017

Data

Improvements2017

Muscle memory

I am not recommending :)

Improvements2017 Improvements

Конфликт ценностей

2017

Autoplay

Improvements2017

Терминология

Заказчи-Девелопер

Improvements

Внимание

к деталям

Improvements2017

АртиклиAt Google, we're always

working on ways to

bridge this gap through

unified spec

Improvements

My Files, Your Files, Files

2017

Использовать My когда можно что то

изменить или персонализировать

или приватность.

Your используем когда

система говорит с нами.

Improvements

My Files, Your Files, Files

2017

Убирая My и Your не всегда работает

хорошо.

Вымышленный

контент

2017

Xero

Improvements

Hotspot tutorial

vs Onboarding

2017

Improvements

Вспоминать

тяжело

2017

Improvements

Состояние ошибки

2017

Spotify

Improvements

Human Language

2017

Improvements

Непонятные

сообщения

2017

Improvements

Уменьшаем негатив

при помощи

анимации

2017

Уменьшаем негатив

при помощи

поощрения


Prime Mod


Но никогда не начинайте Апу

с Prime режима а потом

обратно в обычный

Improvements

Состояние ошибки

2017

Указываем на решение

проблемы.

Dead-End

2017

Указываем на решение

проблемы.


Empty State

2017

Интуитивные подсказки


Emotion

2017

Пустые состояния могут

помочь вам показать

человеческую сторону вашего

бизнеса или продукта.


Emotion


2017

АртиклиAt Google, we're always

working on ways to

bridge this gap through

unified spec


Improvements2017

Error massages

Писать сообщения

нужно на языке

понятном обычному


Improvements

Избегать термины

индустрии

2017

Improvements

Простые

предложения

2017

Improvements

Present

perfect

2017

Improvements2017

Мутные сообщения

Нужно предлагать решения

или альтернативу

Improvements

Диалоги

и надписи

2017

Improvements2017

Диалоги

и надписи

Improvements

Не обвиняйте

пользователя

2017

Improvements

Select

2017

Improvements

Stepper first

2017

Improvements

Select vs Input

2017

Improvements

Friendly

2017

Virgin America

Improvements

Autocomplete

2017

Improvements

Reduce Input Errors

2017

15% Bounce rate

Improvements

Reduce Input Errors

2017

Improvements

Reduce Input Errors

2017

Decrease 50% Bounce rate

Login Walls


Ask for Rate

Mobile UI/UX details 2017

Improvements

Access

Permissions

2017

Improvements

Progressbar and Preloader

2017

Improvements

Статические индикаторы

2017

Improvements

Preloader

2017

иконка часов - а это пугает и

кажется пользователям более

долгим - Luke W

Improvements

Preloader

2017

Синий цвет снижает раздражение и

повышает расслабленность

Improvements

Load like Lightning

2017

Как долго это долго :)

PageSpeed


Покупателей ждут не более 3-

ех секунд

40%

PageSpeed


https://developers.google.com/speed/pagespeed/insights/

7.2seconds in 2014

2.9seconds in 2017

Google Statistics


25% Apps не используют

больше чем 1 раз

25%

Google Statistics


24% Apps не используют

больше чем 11 раз

34%

Improvements

Go faster

2017

Improvements

Progressbar

2017

Improvements

Якоря

времени

2017

люди тяготеют к числам

1 2 3 5 10 15 20

Improvements

Onboarding

2017

Должна быть возможность

пропустить Onboarding

Improvements

Onboarding

2017

Improvements

Гостевой вход

2017

Improvements

English

2017

Improvements

Machine learning

2017

23% пользователей

покидают приложение

если требуется

регистрация


23%

Guest checkout


PayPal checkout


Гостевой вход


-10%

Show value

of your app

upfront


Поиск

2017

Результаты поиска

должны быть правильно

проиндексированы


Save the user time

and effort

2017

Показывайте предыдущие

поиски


Improvements

Interface should teach

2017

Josh Clark

DESIGNING FOR TOUCH

Cognitive Easy

Мод

2017

Improvements

Reduce Errors in Forms

2017

Legal Issues


Cognitive Easy

2017

Cognitive Easy

EASY = TRUE

2017

Более контрастные изображения

воспринимаются мозгом

с большей конитивной

легкостью

Cognitive Easy

Силуэт

2017

Визуальная подсказка.

Мозг всегда ищет угрозу.

Cognitive Easy

Каркас

2017

Дает возможность

уменьшить время

ожидания подгрузки

контента

Cognitive Easy2017

Cognitive Easy

Select “Remove local copy” to save space.

Save space by selecting “Remove local copy.”

2017

Improvements

One Screen, One Task

2017

Improvements2017


Improvements


2017

Cognitive Easy

Seamlessly

2017

Cognitive Easy

Вымышленная

ошибка

2017

Improvements

Минимизировать

негатив

2017

Cognitive Easy

Seamlessly

2017

Cognitive Easy

Анимация

2017

Cognitive Easy

Последовательность

2017

Cognitive Easy

Микро

анимация

2017

Cognitive Easy

Не анимируйте на

одном экране все

вместе.

2017

Little Big Details

2017

Details

Dropbox

Крышка мусорника

открывается в режиме

просмотра удаленного

контента

Details

iOs

Spinner крутиться медленее

когда плохой конекшен

Details

OSX

Когда документ не сохранен,

на кнопке закрытия

появляется точка

Cognitive Easy

Визуальные

подсказки

2017

Cognitive Easy

Не перекрывает

контент

2017

Cognitive Easy

Поздравление

в день рождения

2017

Cognitive Easy

Маленькие

детали

2017

Cognitive Easy

Мод и цикл

2017

Cognitive Easy

Evernote

2017

Service Design

это проектирование

процессов и услуг так что бы

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

впечатление

Cognitive Easy

Что почитать ?

2017

Thanks

2017