Mobile UX - Dmytro Svarytsevych

•

0 recomendaciones•203 vistas

Ми стоїмо на порозі нової ери - HTML5, якого так бояться Adobe та Microsoft. Один код, що працює під всіма платформами. Один набір зображень під всі роздільні здатності екранів. Мобільний Web. Мрія розробника! Проте чи завжди доречне використання HTML5? Коли, як і чому? Як зберегти юзабіліті програми на високому рівні? Цей огляд допоможе зробити вибір технології. Порівняння підходів та спроба побудувати універсальний патерн побудови інтерфейсу програми - мета цієї презентації.

Educación Tecnología Empresariales

Mobile UX
Dmytro Svarytsevych, SoftServe

•Messaging
•Audio
•Imaging, Media Sharing
•Microblogging, Social Media
•Location-Based
•Enterprise
•Search, QR Codes
•Phone,VoIP
•Games

HOW?

• distractions
• small screens
• one thumb input
• little battery

WHERE?

• at home
• misc. situations during day
• waiting in line
• at work

MOBILE BEHAVIORS

•What mobile is good at
•Content ﬁrst, navigation - second
•Adjust app organization accordingly
•Don’t dumb site down for mobile

REDUCE SIZE
•Eliminate redirects
•Use CSS sprites
•Single ﬁles
•Minify code
•Load contents lazily
•Use cache
•Use CSS3 possibilities

LEAN ON CSS3

•border-radius
•rgba-color
•text-shadow
•box-shadow
•gradients
•multiple backgrounds

CLARITY AND FOCUS

•Minimize navigation required
•Focus on task

OPTIMIZING SCREEN

Text

http://www.useit.com/alertbox/mobile-redesign.html

Native App vs. Web App
Hardware features Only GPS

Compiled Code, High Performance Interpreted Code

High Security Low Security

Normal Storage Limited Storage

Complex Gestures Only basic

UI pack for every screen One UI pack

No sharing possible Can share URL

Lower battery use GPRS, Wi Fi or 3G grabs battery

Native Apps - for doing

•Photo editing
•Video overlays
•Augmented reality
•Interactive games

Web Apps - for reference

•To-do's
•Schedule
•Mail
•News
•Galleries

Useful Links

• http://mobile-patterns.com
• http://pttrns.com
• http://androidpatterns.com
• http://lovelyui.com

Más contenido relacionado

La actualidad más candente

Short andrea mobile_presentationAndrea Short

Mobile InternetMichaël Uyttersprot

Amy xplode april 2013 v5Amy Smythe-Harris

Ipad tablet class april 2013Amy Smythe-Harris

CT Mobile Website PresentationBWW Solutions

The mobile browser worldPeter-Paul Koch

Embracing the mobile frontier and reaching the digital nativesEktron

Mobile agent part 2 alabama june 2012Amy Smythe-Harris

Dolphin Browser Overview 2012Dolphin Browser

Ai in communicationMaricel Polmo

Tuenti Mobile DevelopmentTuenti

"Designing for the Responsive Web" - AIGA South Dakota Open Mouse NightBlend Interactive

State of the Mobile BrowsersPeter-Paul Koch

iPad ClassVic Ward

Comp litshuadaab

Nokia N900 ReportHany Al Hamidi

First Steps in iOS DevelopmentSasha Goldshtein

Media props (online shopping)knaz1997

What is QR?Bill Hitchcock

Howard noah moblilepresentationnoahbh

La actualidad más candente (20)

Short andrea mobile_presentation

Mobile Internet

Amy xplode april 2013 v5

Ipad tablet class april 2013

CT Mobile Website Presentation

The mobile browser world

Embracing the mobile frontier and reaching the digital natives

Mobile agent part 2 alabama june 2012

Dolphin Browser Overview 2012

Ai in communication

Tuenti Mobile Development

"Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night

State of the Mobile Browsers

iPad Class

Comp lit

Nokia N900 Report

First Steps in iOS Development

Media props (online shopping)

What is QR?

Howard noah moblilepresentation

Destacado

Getting Things Done - Сергій ФіцакIgor Bronovskyy

Програмний захист принтерів - Василь ФученкоIgor Bronovskyy

Meeting customerexpectations - SeredyukIgor Bronovskyy

Joomla 3. Що нового для розробників у новій версії - Віталій МаренковIgor Bronovskyy

14 - vilne plavannia, abo yak robyty produkt bez produkt ovnera - lesia syman...Igor Bronovskyy

15 - sphinx - efektyvnyi povnotekstovyi poshuk - marian koreniuk - it event 2...Igor Bronovskyy

Stahiv методологічні основи процесів прийняття рішеньIgor Bronovskyy

13 - jms. asynchronous communication in java - michal szynkiewicz - it event ...Igor Bronovskyy

пеценчукIgor Bronovskyy

07 - vysnovky z tdd, pohliad pochatkivtsia - vitalii zinchenko it event 2013...Igor Bronovskyy

GorbalIgor Bronovskyy

Історія, теорія та використання CMS DrupalIgor Bronovskyy

PHP MVC vs. RubyOnRails - Анатолій СєрнийIgor Bronovskyy

СІНТ-Майстер IT Event 2010Igor Bronovskyy

Протокол IP v.6: кожному по 300 млн. IP адрес - Сергій ШулярIgor Bronovskyy

09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)Igor Bronovskyy

IT People-Задзеркалля - Руслан СередюкIgor Bronovskyy

Процес забезпечення якості програмних продуктівIgor Bronovskyy

Інформаційна безпека. Інсайдери - Михайло ФенюкIgor Bronovskyy

Destacado (19)

Getting Things Done - Сергій Фіцак

Програмний захист принтерів - Василь Фученко

Meeting customerexpectations - Seredyuk

Joomla 3. Що нового для розробників у новій версії - Віталій Маренков

14 - vilne plavannia, abo yak robyty produkt bez produkt ovnera - lesia syman...

15 - sphinx - efektyvnyi povnotekstovyi poshuk - marian koreniuk - it event 2...

Stahiv методологічні основи процесів прийняття рішень

13 - jms. asynchronous communication in java - michal szynkiewicz - it event ...

пеценчук

07 - vysnovky z tdd, pohliad pochatkivtsia - vitalii zinchenko it event 2013...

Gorbal

Історія, теорія та використання CMS Drupal

PHP MVC vs. RubyOnRails - Анатолій Сєрний

СІНТ-Майстер IT Event 2010

Протокол IP v.6: кожному по 300 млн. IP адрес - Сергій Шуляр

09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)

IT People-Задзеркалля - Руслан Середюк

Процес забезпечення якості програмних продуктів

Інформаційна безпека. Інсайдери - Михайло Фенюк

Similar a Mobile UX - Dmytro Svarytsevych

Mobile CMS - CMSExpo 2010Tom Deryckere

Designing for Mobile DevicesOxonDigital

Internet & Beyond - Rosary College BCA Students PresentationVernon Fernandes

Mobile website --- Web is in pocket....Naga Harish M

Rame mobile conferenceAndrew Walker

Comp4010 Lecture7 Designing AR SystemsMark Billinghurst

Mobile applications developmentVictor Matyushevskyy

Socialize Mobil:e + Social at LavaCon for conetnt strategistsgetsocialize

Beyond the Desktop: Sites and Apps for Phones and TabletsWebvanta

A research on i pad device & experience designVinny Wu

Cross platform mobile development - you tube videosColin Eberhardt

HTML5 is the Future of Mobile, PhoneGap Takes You There Todaydavyjones

Understanding Native, Hybrid, and Web Mobile ArchitecturesSalesforce Developers

DjangoSkiBrian LeRoux

W3C Mobile Web technologiesRobin Berjon

Going mobile writing content for mobileMaya Irving-Regev

Google glass.ABhay Panchal

Web Apps vs. Native Apps: The Low DownApppli

Mobile Web High PerformanceMaximiliano Firtman

Android slidesabdul aamer

Similar a Mobile UX - Dmytro Svarytsevych (20)

Mobile CMS - CMSExpo 2010

Designing for Mobile Devices

Internet & Beyond - Rosary College BCA Students Presentation

Mobile website --- Web is in pocket....

Rame mobile conference

Comp4010 Lecture7 Designing AR Systems

Mobile applications development

Socialize Mobil:e + Social at LavaCon for conetnt strategists

Beyond the Desktop: Sites and Apps for Phones and Tablets

A research on i pad device & experience design

Cross platform mobile development - you tube videos

HTML5 is the Future of Mobile, PhoneGap Takes You There Today

Understanding Native, Hybrid, and Web Mobile Architectures

DjangoSki

W3C Mobile Web technologies

Going mobile writing content for mobile

Google glass.

Web Apps vs. Native Apps: The Low Down

Mobile Web High Performance

Android slides

Último

Interdisciplinary_Insights_Data_Collection_Methods.pptxPooja Bhuva

SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptxAmanpreet Kaur

Application orientated numerical on hev.pptRamjanShidvankar

How to Manage Global Discount in Odoo 17 POSCeline George

Sociology 101 Demonstration of Learning Exhibitjbellavia9

HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptxmarlenawright1

ICT role in 21st century education and it's challenges.MaryamAhmad92

Accessible Digital Futures project (20/03/2024)Jisc

Unit-V; Pricing (Pharma Marketing Management).pptxVishalSingh1417

ICT Role in 21st Century Education & its Challenges.pptxAreebaZafar22

Single or Multiple melodic lines structuredhanjurrannsibayan2

This PowerPoint helps students to consider the concept of infinity.christianmathematics

Micro-Scholarship, What it is, How can it help me.pdfPoh-Sun Goh

Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...pradhanghanshyam7136

Towards a code of practice for AI in AT.pptxJisc

Salient Features of India constitution especially power and functionsKarakKing

Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...ZurliaSoop

Spellings Wk 3 English CAPS CARES Please PractiseAnaAcapella

SOC 101 Demonstration of Learning Presentationcamerronhm

Understanding Accommodations and ModificationsMJDuyan

Mobile UX - Dmytro Svarytsevych

1. Mobile UX Dmytro Svarytsevych, SoftServe

2. How we use mobiles?

3. •Messaging •Audio •Imaging, Media Sharing •Microblogging, Social Media •Location-Based •Enterprise •Search, QR Codes •Phone,VoIP •Games

5. HOW? • distractions • small screens • one thumb input • little battery

6. WHERE? • at home • misc. situations during day • waiting in line • at work

7. UX

8. MOBILE BEHAVIORS •What mobile is good at •Content ﬁrst, navigation - second •Adjust app organization accordingly •Don’t dumb site down for mobile

9. TOUCH TARGETS

10. COMFORT ZONE

11. EXCESSIVE NAVIGATION

12. QUICK ACCESS

13. CONTEXT ACTIONS

14. FIXED POSITIONING

15. REDUCE SIZE •Eliminate redirects •Use CSS sprites •Single ﬁles •Minify code •Load contents lazily •Use cache •Use CSS3 possibilities

16. LEAN ON CSS3 •border-radius •rgba-color •text-shadow •box-shadow •gradients •multiple backgrounds

17. CLARITY AND FOCUS •Minimize navigation required •Focus on task

18. OPTIMIZING SCREEN Text http://www.useit.com/alertbox/mobile-redesign.html

19. OPTIMIZING SCREEN Text http://www.useit.com/alertbox/mobile-redesign.html

20. Web Apps UX

21. WHO CARES ABOUT UX?

22. TITLE BAR

23. TAB BAR

24. TITLE & TAB BAR

25. DASHBOARD

26. TAB BAR VS. DASHBOARD

27. Mobile Web vs. Native

28. Native App vs. Web App Hardware features Only GPS Compiled Code, High Performance Interpreted Code High Security Low Security Normal Storage Limited Storage Complex Gestures Only basic UI pack for every screen One UI pack No sharing possible Can share URL Lower battery use GPRS, Wi Fi or 3G grabs battery

29. Native Apps - for doing •Photo editing •Video overlays •Augmented reality •Interactive games

30. Web Apps - for reference •To-do's •Schedule •Mail •News •Galleries

31. Useful Links • http://mobile-patterns.com • http://pttrns.com • http://androidpatterns.com • http://lovelyui.com

32. Books

Mobile UX - Dmytro Svarytsevych

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (19)

Similar a Mobile UX - Dmytro Svarytsevych

Similar a Mobile UX - Dmytro Svarytsevych (20)

Último

Último (20)

Mobile UX - Dmytro Svarytsevych