How to improve mobile UI/UX

Как улучшить
UI/UX в мобильном
приложении
2017
Апостол Николай

Estimation
Роберт Мозес
User personas

Estimation
Камденская лавка
Это шедевр "неприятного дизайна"

Estimation
Heathrow Airport
Terminal 5
700 мест для почти 35 млн пассажиров
единственный способ присесть - это посетить
один из 25 ресторанов

Estimation
Эскалаторы
Вынуждают пройти
несколько дополнительных магазинов
на каждом этаже

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

2017
Эстимация всего проекта до воркшопа может
обернуться крахом и по дедлайнам, и по качеству. Ведь
именно в рамках воркшопа выясняется реальный объем
работ.

Estimation
Эстимация всего проекта до воркшопа может
обернуться крахом и по дедлайнам, и по
качеству. Ведь именно в рамках воркшопа
выясняется реальный объем работ.

Estimation2017
Оценка проекта
Идеальное
состояние
Пустое
состояние
Состояние
ошибки
Состояние
частичной
заполненности
Состояние
загрузки.
Склет

Estimation2017
Пустые состояния
Первый
запуск
Все данные
удалены
Нет данных
для отображения
например
результат поиска

Project Manager not Premier Manager

Estimation
MVP and Design Sprints

Microinteractions
Microinteractions
Dan Sffer

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

Детали
Microinteractions

2017
Детали
Microinteractions

Детали
Mobile UI/UX details

Microinteractions2017
это то, что
приводит людей к
вашему продукту
Фунционал
это то, что их
удерживает
надолго
Детали

Feedback

Mircointeractions
Передают отклик
или результат
действий
пользователя
Выполняют
индивидуальную
задачу
Улучшают
чувство прямой
манипуляции
Помогают
пользователю
визуализировать
результаты своих
действий и избегать
ошибок.
01 02 03 04

Microinteractions
Turn off mode

Визуальные
подсказки. Призыв
или намек к
действию
Trigger
Правила
определяют, что,
как и в каком
порядке может
происходить
Rules
Обратная связь
поясняет
правила.
Используйте юмор.
Feedback
Циклы продлевают
жизнь
микровзаимодейст
вий
Loops&Mods

Microinteractions
Дизанер
2017
Пользователь

Microinteractions
Trigger
2017

Звук Гироскоп Вибрация Время суток,
геопозиция,
режим
телефона...

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

2017
Telegram
Voice messages

Гироскоп

Пресеты
и повторения

Microinteractions
Overlapping
2017

Поощрение

Cognitive Load
Cognitive Load
это количество логических связей и
переходов, необходимых нашему
мозгу для осознания и понимания
объекта, на который мы смотрим.

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
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
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 details2017

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.2
seconds in 2014
2.9
seconds in 2017

Google Statistics
25% Apps не используют
больше чем 1 раз
25%

Google Statistics
24% Apps не используют
больше чем 11 раз
34%

Improvements
Якоря
времени
2017
люди тяготеют к числам
1 2 3 5 10 15 20

Improvements
Onboarding
2017
Должна быть возможность
пропустить Onboarding

Improvements
Гостевой вход
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

Improvements
Reduce Errors in Forms
2017

Legal Issues

Cognitive Easy
EASY = TRUE
2017
Более контрастные изображения
воспринимаются мозгом
с большей конитивной
легкостью

Cognitive Easy
Силуэт
2017
Визуальная подсказка.
Мозг всегда ищет угрозу.

Cognitive Easy
Каркас
2017
Дает возможность
уменьшить время
ожидания подгрузки
контента

Cognitive Easy
Select “Remove local copy” to save space.
Save space by selecting “Remove local copy.”
2017

Improvements
One Screen, One Task
2017

Improvements2017
One Screen, One Task

Cognitive Easy
Seamlessly
2017

Cognitive Easy
Вымышленная
ошибка
2017

Improvements
Минимизировать
негатив
2017

Cognitive Easy
Анимация
2017

Cognitive Easy
Последовательность
2017

Cognitive Easy
Микро
анимация
2017

Cognitive Easy
Не анимируйте на
одном экране все
вместе.
2017

Details
Dropbox
Крышка мусорника
открывается в режиме
просмотра удаленного
контента

Details
iOs
Spinner крутиться медленее
когда плохой конекшен

Details
OSX
Когда документ не сохранен,
на кнопке закрытия
появляется точка

Cognitive Easy
Визуальные
подсказки
2017

Cognitive Easy
Не перекрывает
контент
2017

Cognitive Easy
Поздравление
в день рождения
2017

Cognitive Easy
Маленькие
детали
2017

Cognitive Easy
Мод и цикл
2017

Service Design
это проектирование
процессов и услуг так что бы
осталось приятное
впечатление

Cognitive Easy
Что почитать ?
2017

How to improve mobile UI/UX

More Related Content

Viewers also liked

Similar to How to improve mobile UI/UX

More from iQSpace

How to improve mobile UI/UX