SlideShare a Scribd company logo
1 of 16
First of all, some context
MOBILE DESIGN

inspiring new ways of design and development
Antony Ribot, CEO, Ribot




O2 Litmus - 12.12.2008
The user-centered developer
A DIFFERENT WAY OF THINKING


develops with the user in mind

a bridge between designer and developer

not a role for every developer

does not replace traditional UX expert
Constraints of mobile
But which is most important?


form factor                    battery

network latency                context

input mechanism

memory

computational power
Context of use
Time for a snack...
DATA-SNACKING


small snippets of info

30-60 seconds

simple, but repetitive

regular
Re-use learnt behaviours
Re-use interactions inherent in the device

Minimise the number of surprises

soft key positions     colour

menu navigation        tone of voice



                        http://www.flickr.com/photos/8586443@N03/1491516038/
Mobile is not about making
things smaller

Miniaturisation   vs                 Mobilisation




http://mobilewebbook.com
                       http://www.flickr.com/photos/tridi_animeitor/2224661744/
It’s all about the subtleties
Fewer options = simple and more effective
interface

Polish makes the UX and app stand out
Working around the 3G icon
Reward-based exploration
FOCUSING ON THE KEY FEATURE AND DOING IT WELL


keep it as simple as possible (the hard part)

 1.allow the user to play within safe boundaries

 2. user’s comfort increases

 3. sense of exploration increases

 4. discovery of features almost by accident
                                      http://www.flickr.com/photos/devos/95230930/
Opera Mini
A REWARD-BASED MOBILE BROWSER


page by page scrolling
Opera Mini
A REWARD-BASED MOBILE BROWSER


Short-cuts in the soft key menu
How to deal with diversity
select lead handsets for your target audience

use the design process to tackle “graceful
degradation”




 http://www.admob.com/

                           http://www.flickr.com/photos/joaomoura/2661761961/
Why use rapid prototyping
test ideas quickly in a tangible environment

extremely useful reference for developers

an interactive showcase of the intended UX
Mobile rapid prototyping tools
Flash (lite v3.0)

XHTML + CSS

Nokia Web Runtime

Silverlight

Dashcode
                    http://www.flickr.com/photos/brianauer/2249169858/
thank you




Antony Ribot
ribot.co.uk
               http://www.flickr.com/photos/ronlayters/2402199783/

More Related Content

What's hot

Designing The Mobile User Experience
Designing The Mobile User ExperienceDesigning The Mobile User Experience
Designing The Mobile User Experience
Jose Alves
 
Project glass ieee document
Project glass ieee documentProject glass ieee document
Project glass ieee document
bhavyakishore
 

What's hot (19)

Google glass
 Google glass Google glass
Google glass
 
Google glass ppt
Google glass pptGoogle glass ppt
Google glass ppt
 
Google glass
Google glassGoogle glass
Google glass
 
powerpoint presentation on Google glass
powerpoint presentation on Google glasspowerpoint presentation on Google glass
powerpoint presentation on Google glass
 
Usability and UXd for apps - by Bonolota UXd at Microsoft Bangladesh
Usability and UXd for apps - by Bonolota UXd at Microsoft BangladeshUsability and UXd for apps - by Bonolota UXd at Microsoft Bangladesh
Usability and UXd for apps - by Bonolota UXd at Microsoft Bangladesh
 
Designing The Mobile User Experience
Designing The Mobile User ExperienceDesigning The Mobile User Experience
Designing The Mobile User Experience
 
google glass
google glassgoogle glass
google glass
 
Google Glass
Google GlassGoogle Glass
Google Glass
 
input devices
input devicesinput devices
input devices
 
Google glass presentation
Google glass presentationGoogle glass presentation
Google glass presentation
 
Touch UIs are Quite Different
Touch UIs are Quite DifferentTouch UIs are Quite Different
Touch UIs are Quite Different
 
google glass
google glassgoogle glass
google glass
 
What is the NeoKeys mixed media keypad for next generation mobile user experi...
What is the NeoKeys mixed media keypad for next generation mobile user experi...What is the NeoKeys mixed media keypad for next generation mobile user experi...
What is the NeoKeys mixed media keypad for next generation mobile user experi...
 
Google Glass
Google GlassGoogle Glass
Google Glass
 
Google glass glasses presentation ppt
Google glass glasses presentation pptGoogle glass glasses presentation ppt
Google glass glasses presentation ppt
 
Google glass
Google glassGoogle glass
Google glass
 
Google Glass Seminar PPT
Google Glass Seminar PPTGoogle Glass Seminar PPT
Google Glass Seminar PPT
 
GOOGLE,ANDROID,GOOGLE GLASS
GOOGLE,ANDROID,GOOGLE GLASSGOOGLE,ANDROID,GOOGLE GLASS
GOOGLE,ANDROID,GOOGLE GLASS
 
Project glass ieee document
Project glass ieee documentProject glass ieee document
Project glass ieee document
 

Viewers also liked

WW2 Aircraft
WW2 AircraftWW2 Aircraft
WW2 Aircraft
kyt1968
 
Teaching design and technology
Teaching design and technologyTeaching design and technology
Teaching design and technology
cloudberrynine
 
Dt as level coursework
Dt as level courseworkDt as level coursework
Dt as level coursework
HSWILSON
 
Year 11 coursework
Year 11 courseworkYear 11 coursework
Year 11 coursework
bedwells
 

Viewers also liked (20)

WW2 Aircraft
WW2 AircraftWW2 Aircraft
WW2 Aircraft
 
2009.04 APEEC Presentation - A Joint Course of Design and Technology - User-O...
2009.04 APEEC Presentation - A Joint Course of Design and Technology - User-O...2009.04 APEEC Presentation - A Joint Course of Design and Technology - User-O...
2009.04 APEEC Presentation - A Joint Course of Design and Technology - User-O...
 
Game designdocs
Game designdocsGame designdocs
Game designdocs
 
What is Unity?
What is Unity?What is Unity?
What is Unity?
 
Scratch project
Scratch projectScratch project
Scratch project
 
#Gc2020 Innovation through game design thinking, play and experience
#Gc2020 Innovation through game design thinking, play and experience#Gc2020 Innovation through game design thinking, play and experience
#Gc2020 Innovation through game design thinking, play and experience
 
Tecnocreatividad y design thinking. Usos creativos de las tecnologías para el...
Tecnocreatividad y design thinking. Usos creativos de las tecnologías para el...Tecnocreatividad y design thinking. Usos creativos de las tecnologías para el...
Tecnocreatividad y design thinking. Usos creativos de las tecnologías para el...
 
Design & Technology
Design & TechnologyDesign & Technology
Design & Technology
 
20170126 #bett2017 @margaridaromero From computing to computational thinking:...
20170126 #bett2017 @margaridaromero From computing to computational thinking:...20170126 #bett2017 @margaridaromero From computing to computational thinking:...
20170126 #bett2017 @margaridaromero From computing to computational thinking:...
 
The Importance of Design & Technology and Engineering in the Lifelong Learnin...
The Importance of Design & Technology and Engineering in the Lifelong Learnin...The Importance of Design & Technology and Engineering in the Lifelong Learnin...
The Importance of Design & Technology and Engineering in the Lifelong Learnin...
 
Mechanisms
MechanismsMechanisms
Mechanisms
 
#Edulearn16 #cocreatic. Educational robotics: from procedural learning to co-...
#Edulearn16 #cocreatic. Educational robotics: from procedural learning to co-...#Edulearn16 #cocreatic. Educational robotics: from procedural learning to co-...
#Edulearn16 #cocreatic. Educational robotics: from procedural learning to co-...
 
Design and Technology Association (DATA) summer school keynote 2015
Design and Technology Association (DATA) summer school keynote 2015Design and Technology Association (DATA) summer school keynote 2015
Design and Technology Association (DATA) summer school keynote 2015
 
Ninja Cat Flyer - 1 of 6
Ninja Cat Flyer - 1 of 6Ninja Cat Flyer - 1 of 6
Ninja Cat Flyer - 1 of 6
 
design thinking
design thinking design thinking
design thinking
 
Teaching design and technology
Teaching design and technologyTeaching design and technology
Teaching design and technology
 
Dt as level coursework
Dt as level courseworkDt as level coursework
Dt as level coursework
 
#ScratchMIT2016 Ignite talk on intergenerational creative game creation
#ScratchMIT2016 Ignite talk on intergenerational creative game creation#ScratchMIT2016 Ignite talk on intergenerational creative game creation
#ScratchMIT2016 Ignite talk on intergenerational creative game creation
 
Design and Technology Association summer school 2016 keynote speech
Design and Technology Association summer school 2016 keynote speechDesign and Technology Association summer school 2016 keynote speech
Design and Technology Association summer school 2016 keynote speech
 
Year 11 coursework
Year 11 courseworkYear 11 coursework
Year 11 coursework
 

Similar to Inspiring new ways of mobile design and development

Mobile First - Web & PHP Conference - 2013-09-17 Keynote
Mobile First - Web & PHP Conference - 2013-09-17 KeynoteMobile First - Web & PHP Conference - 2013-09-17 Keynote
Mobile First - Web & PHP Conference - 2013-09-17 Keynote
Frédéric Harper
 
Mobilising Digital Melbourne 21/03/2014
Mobilising Digital Melbourne 21/03/2014Mobilising Digital Melbourne 21/03/2014
Mobilising Digital Melbourne 21/03/2014
Precedent
 

Similar to Inspiring new ways of mobile design and development (20)

Windows Phone UX - a 101 @ BizSpark
Windows Phone UX - a 101 @ BizSparkWindows Phone UX - a 101 @ BizSpark
Windows Phone UX - a 101 @ BizSpark
 
UX for Apps - GDG at BUET 9 Nov 2013 Masrur Hannan and Shadman Rahman
UX for Apps - GDG at BUET 9 Nov 2013 Masrur Hannan and Shadman RahmanUX for Apps - GDG at BUET 9 Nov 2013 Masrur Hannan and Shadman Rahman
UX for Apps - GDG at BUET 9 Nov 2013 Masrur Hannan and Shadman Rahman
 
Mobile UX 101 @ Flash Camp Manchester
Mobile UX 101 @ Flash Camp ManchesterMobile UX 101 @ Flash Camp Manchester
Mobile UX 101 @ Flash Camp Manchester
 
Mobile First - Web & PHP Conference - 2013-09-17 Keynote
Mobile First - Web & PHP Conference - 2013-09-17 KeynoteMobile First - Web & PHP Conference - 2013-09-17 Keynote
Mobile First - Web & PHP Conference - 2013-09-17 Keynote
 
Mobilising Digital - Perth 13/03/14
Mobilising Digital - Perth 13/03/14Mobilising Digital - Perth 13/03/14
Mobilising Digital - Perth 13/03/14
 
Mobile User Experience
Mobile User ExperienceMobile User Experience
Mobile User Experience
 
Ux portfolio 2013 october final ivan pecorari
Ux portfolio 2013 october final ivan pecorariUx portfolio 2013 october final ivan pecorari
Ux portfolio 2013 october final ivan pecorari
 
How to design the human machine interface of smartwatches
How to design the human machine interface of smartwatchesHow to design the human machine interface of smartwatches
How to design the human machine interface of smartwatches
 
Singapore Mobile 2.0 & Ux Trends 2009: Scott Weiss
Singapore Mobile 2.0 & Ux Trends 2009: Scott WeissSingapore Mobile 2.0 & Ux Trends 2009: Scott Weiss
Singapore Mobile 2.0 & Ux Trends 2009: Scott Weiss
 
User Experience presentation
User Experience presentation User Experience presentation
User Experience presentation
 
Catching up on UX
Catching up on UXCatching up on UX
Catching up on UX
 
The Future of User Experience
The Future of User ExperienceThe Future of User Experience
The Future of User Experience
 
The Glass Class: Rapid Prototyping for Wearable Computers
The Glass Class: Rapid Prototyping for Wearable ComputersThe Glass Class: Rapid Prototyping for Wearable Computers
The Glass Class: Rapid Prototyping for Wearable Computers
 
Mapping ux culture
Mapping ux cultureMapping ux culture
Mapping ux culture
 
SparkUp 2010 Mobile UX 101
SparkUp 2010 Mobile UX 101SparkUp 2010 Mobile UX 101
SparkUp 2010 Mobile UX 101
 
Windows Phone UX
Windows Phone UXWindows Phone UX
Windows Phone UX
 
How To Create Web Sites For Mobile Clients
How To Create Web Sites For Mobile ClientsHow To Create Web Sites For Mobile Clients
How To Create Web Sites For Mobile Clients
 
Outcome not Output - Maraspin
Outcome not Output - Maraspin Outcome not Output - Maraspin
Outcome not Output - Maraspin
 
User Interface Design for Web and Mobile Devices
User Interface Design for Web and Mobile DevicesUser Interface Design for Web and Mobile Devices
User Interface Design for Web and Mobile Devices
 
Mobilising Digital Melbourne 21/03/2014
Mobilising Digital Melbourne 21/03/2014Mobilising Digital Melbourne 21/03/2014
Mobilising Digital Melbourne 21/03/2014
 

Recently uploaded

Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Nitya salvi
 
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
eeanqy
 
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
ehyxf
 
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
sriharipichandi
 

Recently uploaded (20)

Independent Escorts Goregaon WhatsApp +91-9930687706, Best Service
Independent Escorts Goregaon WhatsApp +91-9930687706, Best ServiceIndependent Escorts Goregaon WhatsApp +91-9930687706, Best Service
Independent Escorts Goregaon WhatsApp +91-9930687706, Best Service
 
How to Create a Productive Workspace Trends and Tips.pdf
How to Create a Productive Workspace Trends and Tips.pdfHow to Create a Productive Workspace Trends and Tips.pdf
How to Create a Productive Workspace Trends and Tips.pdf
 
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
 
The hottest UI and UX Design Trends 2024
The hottest UI and UX Design Trends 2024The hottest UI and UX Design Trends 2024
The hottest UI and UX Design Trends 2024
 
Gamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad IbrahimGamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad Ibrahim
 
Eye-Catching Web Design Crafting User Interfaces .docx
Eye-Catching Web Design Crafting User Interfaces .docxEye-Catching Web Design Crafting User Interfaces .docx
Eye-Catching Web Design Crafting User Interfaces .docx
 
Sweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptxSweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptx
 
How to Turn a Picture Into a Line Drawing in Photoshop
How to Turn a Picture Into a Line Drawing in PhotoshopHow to Turn a Picture Into a Line Drawing in Photoshop
How to Turn a Picture Into a Line Drawing in Photoshop
 
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
 
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for FriendshipRaebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
 
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime PondicherryPondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
 
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdfJordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
 
Q4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentationQ4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentation
 
Lecture 01 Introduction To Multimedia.pptx
Lecture 01 Introduction To Multimedia.pptxLecture 01 Introduction To Multimedia.pptx
Lecture 01 Introduction To Multimedia.pptx
 
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
 
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
 
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service AvailableCall Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
 
Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...
Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...
Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...
 
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEKLANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
 
Furniture & Joinery Details_Designs.pptx
Furniture & Joinery Details_Designs.pptxFurniture & Joinery Details_Designs.pptx
Furniture & Joinery Details_Designs.pptx
 

Inspiring new ways of mobile design and development

  • 1. First of all, some context MOBILE DESIGN inspiring new ways of design and development Antony Ribot, CEO, Ribot O2 Litmus - 12.12.2008
  • 2. The user-centered developer A DIFFERENT WAY OF THINKING develops with the user in mind a bridge between designer and developer not a role for every developer does not replace traditional UX expert
  • 3. Constraints of mobile But which is most important? form factor battery network latency context input mechanism memory computational power
  • 5. Time for a snack... DATA-SNACKING small snippets of info 30-60 seconds simple, but repetitive regular
  • 6. Re-use learnt behaviours Re-use interactions inherent in the device Minimise the number of surprises soft key positions colour menu navigation tone of voice http://www.flickr.com/photos/8586443@N03/1491516038/
  • 7. Mobile is not about making things smaller Miniaturisation vs Mobilisation http://mobilewebbook.com http://www.flickr.com/photos/tridi_animeitor/2224661744/
  • 8. It’s all about the subtleties Fewer options = simple and more effective interface Polish makes the UX and app stand out
  • 10. Reward-based exploration FOCUSING ON THE KEY FEATURE AND DOING IT WELL keep it as simple as possible (the hard part) 1.allow the user to play within safe boundaries 2. user’s comfort increases 3. sense of exploration increases 4. discovery of features almost by accident http://www.flickr.com/photos/devos/95230930/
  • 11. Opera Mini A REWARD-BASED MOBILE BROWSER page by page scrolling
  • 12. Opera Mini A REWARD-BASED MOBILE BROWSER Short-cuts in the soft key menu
  • 13. How to deal with diversity select lead handsets for your target audience use the design process to tackle “graceful degradation” http://www.admob.com/ http://www.flickr.com/photos/joaomoura/2661761961/
  • 14. Why use rapid prototyping test ideas quickly in a tangible environment extremely useful reference for developers an interactive showcase of the intended UX
  • 15. Mobile rapid prototyping tools Flash (lite v3.0) XHTML + CSS Nokia Web Runtime Silverlight Dashcode http://www.flickr.com/photos/brianauer/2249169858/
  • 16. thank you Antony Ribot ribot.co.uk http://www.flickr.com/photos/ronlayters/2402199783/