SlideShare a Scribd company logo
1 of 62
Download to read offline
Gran Sasso Science Institute
Ivano Malavolta
UI design
Roadmap
Intro + Examples
Human Interface Principles
Platform Characteristics
UX Guidelines
Introduction
Before focussing on UI….

in mobile you can always control

Content
naming
Visual
design
Content Naming
Before you start reasoning on the UI…

Define an APP DICTIONARY

Write down the terms and messages used in the app

ex. 
–  “tweets” in Twitter
–  “likes” in Facebook
Visual Design
The direct representation of everything under your app

The first impression the user will have

It is not only about layout & colors…
it is about SENSORY SENSATIONS
Example 1
http://drbl.in/czjd
Anti-example 1
Roadmap
Intro + Examples
Human Interface Principles
Platform Characteristics
UX Guidelines
Aesthetic Integrity
It’s a measure of how well the appearance of the app
integrates with its function

•  Productive app à order & clarity
•  Game à gamish, frivoulous
•  …
Consistency
Take advantage of the standards and paradigms people are
comfortable with

Does it use system-provided controls, views, and icons correctly?

Is the application consistent within itself?

Does text use uniform terminology and style?

Can people predict what will happen?
Direct Manipulation
Try to let your users direct manipulate objects in your app

Users can experience direct manipulation when they:
•  Rotate or otherwise move the device 

to affect onscreen objects
•  Use gestures to manipulate 

onscreen objects
•  Can see that their actions have

immediate, visible results
Feedback
Acknowledge people’s actions and assures them that
processing is occurring

Users expect 
•  immediate feedback 
•  status updates during 

lengthy operations
Metaphors
You may use metaphors for objects in the real world in your
app

Users will quickly grasp how to use the app

Ex.
–  folders
–  photo sliders
–  …
User Control
People, not apps, should initiate and control actions

Apps can suggest actions, but users must do them

Apps can only infer data from the context

Users expect to be able to stop an operation that’s underway
Example 2
http://www.perspecdev.com/Faster/
Anti-example 2
Roadmap
Intro + Examples
Human Interface Principles
Platform Characteristics
UX Guidelines
Display is Paramount 
The DISPLAY is (usually) the only means that users use to
interact with your app!

•  The comfortable minimum size of tappable UI elements is
44 x 44 points
•  The quality of app artwork is fundamental
•  The user’s focus is on the content
Display Orientation
Users can rotate the device at any time and for any reason

Users tend to expect apps to launch in the device orientation
they’re currently using

TIP. You can use the splashscreen image to let the user rotate the
device
Gestures
Users don’t click, they use gestures
–  tap/double tap
–  drag
–  zoom/pinch
–  swipe
–  flick




Users expect all these gestures to work the same,
regardless of the app they’re currently running
User Help
Keep onscreen user help as minimal as possible

In general, users don’t need onscreen help content to tell
them how to use the device or the apps

Remember of the Consistency human-interface principle
Example 3
http://j-a-m.co/balllin
Anti-example 3
Roadmap
Intro + Examples
Human Interface Principles
Platform Characteristics
UX Guidelines
Layout
It is the first aspect to fix
à you need pure feedback on it
à lo-fi wireframing


http://bit.ly/GTp82Q
Tablets
content scrolled
horizontally
Colors psychology
Users react to different colors differently

Colors evoke emotions
BLU
productiveness, interiors,
skies, peace, unity, harmony,
tranquility, calmness, trust,
coolness, confidence,
conservatism, water, ice,
loyalty, dependability,
cleanliness, technology…
Color Palette
Predefined number of colors to use consistently in your app

You can use tools like
palette choosers, or 
palette pickers from images




OR

You can define your palette manually through the color
wheel
http://kuler.adobe.com
Color Wheel
Complementary
when you want something to stand out 
Analogous
choose one color to dominate, 
a second to support, 
the third color is as an accent
http://bit.ly/GTv7on
Color Wheel
Triad
let one color dominate 
and use the two others for accent  
Square
works best if you let one color be
dominant
http://bit.ly/GTv7on
Typography
It is about:
•  selection of the correct font 
•  understanding sizes
•  applying conventional design methodologies 

(size, shape, contrast, color, position, space, etc.)
http://bit.ly/GTvuzj
Readability guidelines
1.  Use a high-contrast typeface
–  Devices are usually used outdoor
2.  Use the right typeface (font)
http://bit.ly/GTwUtv
Readability guidelines
3.  Provide decent leading
–  Leading = the space between two lines

4.  Leave space on the right and left of each line
5.  don’t crowd the screen
Readability guidelines
6.  Generously utilize headings
–  Divide the content into paragraphs
7.  Use short paragraphs
–  2-3 sentences at most
Respect User-Entered data
Input is hard,
users slip (and sleep!)

Do whatever it takes to 
preserve user data
and plan for real-world behaviors
Realize That Mobiles Are Personal

one device for one person

Don’t continuously ask for name, data, etc.

Only implement passwords and clear personal information
when required
Ensure That Lives Take Precedence

Don’t interrupt people’s life!

Differently from desktops

mobiles are glanced at, used in gaps between conversation
and driving and watching TV
Use Your Sensors
Whenever possible, perform actions for the user based on
sensors and user data

Ex.

Why should you have to silence your phone for a meeting,
when the phone knows where you physically are and knows
from your calendar that you have a meeting in that room right
now?
Focus on the Primary Task
you need to determine what’s most important in each
context or screen and…

focus on it exclusively!

Your app definition statement will help you focus on its
primary task
Give your users what they need most!

For example, in a game, people care about the experience,
they don’t expect to manage, consume, or create content

•  Minimize the number of controls in the UI

•  Customize controls so that they integrate with your
app’s graphical style

•  Fade controls away after people have stopped
interacting with them for a little while

Elevate the Content that People Care About
Think Top Down

Put the most frequently used information near the top


Because users hold the device in the following ways:
•  In the left hand and gesturing with a 

finger of the right hand
•  In one hand, and gesturing with the 

thumb of the same hand
•  Between their hands, and gesturing 

with both thumbs
Logical Path
Make the path through the information you present logical
and easy to predict

–  put markers to let them where they are 
–  put a back-button

Give users only one path to a screen
Easy Usage
Your app must be instantly understandable by users

à you cannot assume they want or they have time to learn how
to use your app


Make the main function of your app
immediately evident
User-Centric Terminology

use terminology your users understand

avoid technical jargon
–  This does not hold if your target user is a technical guy
Inputting information takes time and attention, minimize it

TIP. If your app asks users a lot of input data, you have to revise
your design!

Balance any request for input by users with what you offer
them in return

Get information from the OS, when appropriate
–  for example: contacts, address, events in the calendar…
Minimize the Effort Required for User Input
Enable Collaboration
Push for collaboration and sharing with others

When appropriate, make it easy for users to interact with others 
–  allow them to share things like their location, opinions, and
high scores

For tablets: think of ways to allow more than one person to use
your app on the same device
Brand Appropriately
Incorporate a brand’s colors or images in a refined, unobtrusive
way

Avoid taking space away from the content people care about
–  Alternative: subtly customize the background of a screen
Make Search Quick
In apps with a lot of data, SEARCH can be a primary function

Build indexes of your data so that you are always prepared for
search

Live-filter local data so that you can display results more quickly

Display a search bar above a list or the index in a list

Display placeholder content right away and partial results as
they become available
Be Succinct
Think like a newspaper editor, and strive to convey information
in a condensed, headline style

 When your UI text is short and direct, users can absorb it
quickly and easily

Give controls short labels, or use well-understood symbols


users should tell what they do at a glance
Use UI Elements Consistently

Follow the recommended usages for standard user interface
elements

à you can build on users’ prior experience

Avoid radically changing the appearance of a control that
performs a standard action

Never use the standard buttons and icons to mean something
else
Make Targets Fingertip-Size

Display may change, but the average size of a fingertip does not!

Give tappable elements in your application a target area of about
44 x 44 points

If you create smaller controls, the app becomes much less enjoyable

à 
or people may focus on the interface only, rather that 
content
People should have confidence that their work is always
preserved unless they explicitly cancel or delete it

Never ask for saving data, it should be done automatically
–  You can ask to either edit or delete data
Ask People to Save Only When Necessary
Make Modal Tasks Occasional
Modality prevents users’ freedom by interrupting their workflow
and forcing them to choose a particular path

Keep modal tasks fairly short and narrowly focused

Always provide an obvious and safe way to exit a modal task
Start Instantly

Avoid displaying an About window or a splash screen

Avoid asking people to supply setup information

Delay a login requirement for long as possible:
–  Focus your solution on the needs of 80 percent of your
users
–  Get as much information as possible from other sources
–  If you must ask for setup information, put it in your app’s
settings
Always Be Prepared to Stop

Save user data as often as reasonable

Save the current state when stopping
Example 4
http://instagr.am/
Anti-example 4
A Final BAD example
http://www.androiduipatterns.com/2011/11/cautionary-example-of-bad-design.html
Layout & icons
A Final BAD example
Navigation buttons
http://www.androiduipatterns.com/2011/11/cautionary-example-of-bad-design.html
A Final BAD example
Error Handling
http://www.androiduipatterns.com/2011/11/cautionary-example-of-bad-design.html
A Final BAD example
Data Handling
http://www.androiduipatterns.com/2011/11/cautionary-example-of-bad-design.html
References
Chapter 8 
http://bit.ly/H4GnKZ
http://bit.ly/H4Gqq5
+ 39 380 70 21 600
Contact
Ivano Malavolta | 
Gran Sasso Science Institute
iivanoo
ivano.malavolta@univaq.it
www.ivanomalavolta.com

More Related Content

What's hot

User Interface Design
User Interface DesignUser Interface Design
User Interface Design
Jason Hando
 
HUMAN COMPUTER INTERACTION
HUMAN COMPUTER INTERACTIONHUMAN COMPUTER INTERACTION
HUMAN COMPUTER INTERACTION
Javed Ahmed Samo
 

What's hot (20)

User Interface Design
User Interface DesignUser Interface Design
User Interface Design
 
UI vs UX workshop
UI vs UX workshopUI vs UX workshop
UI vs UX workshop
 
Design process design rules
Design process  design rulesDesign process  design rules
Design process design rules
 
Ui vs UX design
Ui vs UX designUi vs UX design
Ui vs UX design
 
HUMAN COMPUTER INTERACTION
HUMAN COMPUTER INTERACTIONHUMAN COMPUTER INTERACTION
HUMAN COMPUTER INTERACTION
 
User interface design
User interface designUser interface design
User interface design
 
UI/UX Fundamentals
UI/UX FundamentalsUI/UX Fundamentals
UI/UX Fundamentals
 
UX/UI Design and How It Works
UX/UI Design and How It WorksUX/UI Design and How It Works
UX/UI Design and How It Works
 
Mobile Application Design & Development
Mobile Application Design & DevelopmentMobile Application Design & Development
Mobile Application Design & Development
 
User interface (UI) for mobile applications
User interface (UI) for mobile applicationsUser interface (UI) for mobile applications
User interface (UI) for mobile applications
 
Design process interaction design basics
Design process interaction design basicsDesign process interaction design basics
Design process interaction design basics
 
UI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed ShehataUI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed Shehata
 
Heuristic evaluation
Heuristic evaluationHeuristic evaluation
Heuristic evaluation
 
UI UX Design Presentation
UI UX Design Presentation UI UX Design Presentation
UI UX Design Presentation
 
What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)
 
Introduction to wireframes
Introduction to wireframesIntroduction to wireframes
Introduction to wireframes
 
UI UX DESIGN.pptx
UI UX DESIGN.pptxUI UX DESIGN.pptx
UI UX DESIGN.pptx
 
A UI and UX training presentation
A UI and UX training presentationA UI and UX training presentation
A UI and UX training presentation
 
Mobile Information Architecture
Mobile Information ArchitectureMobile Information Architecture
Mobile Information Architecture
 
UI UX introduction
UI UX introductionUI UX introduction
UI UX introduction
 

Similar to UI design for mobile apps

dmedia Design Project 2 Interaction Design Brief
dmedia Design Project 2 Interaction Design Briefdmedia Design Project 2 Interaction Design Brief
dmedia Design Project 2 Interaction Design Brief
Stanford dmedia
 
Ux ui presentation2
Ux ui presentation2Ux ui presentation2
Ux ui presentation2
GeneXus
 
1 PROGRAM ISEM RESEARCH PAPER FOR APPLIED.docx
1 PROGRAM ISEM RESEARCH PAPER FOR APPLIED.docx1 PROGRAM ISEM RESEARCH PAPER FOR APPLIED.docx
1 PROGRAM ISEM RESEARCH PAPER FOR APPLIED.docx
honey725342
 

Similar to UI design for mobile apps (20)

UI design for mobile apps
UI design for mobile appsUI design for mobile apps
UI design for mobile apps
 
UI Design
UI DesignUI Design
UI Design
 
User Interface Analysis and Design
User Interface Analysis and DesignUser Interface Analysis and Design
User Interface Analysis and Design
 
Excellence in the Android User Experience
Excellence in the Android User ExperienceExcellence in the Android User Experience
Excellence in the Android User Experience
 
Application Design - Part 3
Application Design - Part 3Application Design - Part 3
Application Design - Part 3
 
Usability Workshop at Lillebaelt Academy
Usability Workshop at Lillebaelt AcademyUsability Workshop at Lillebaelt Academy
Usability Workshop at Lillebaelt Academy
 
dmedia Design Project 2 Interaction Design Brief
dmedia Design Project 2 Interaction Design Briefdmedia Design Project 2 Interaction Design Brief
dmedia Design Project 2 Interaction Design Brief
 
Importance of UX-UI in Android/iOS Development- Stackon
Importance of UX-UI in Android/iOS Development- StackonImportance of UX-UI in Android/iOS Development- Stackon
Importance of UX-UI in Android/iOS Development- Stackon
 
Mobile User Experience - @iRajLal
Mobile User Experience - @iRajLalMobile User Experience - @iRajLal
Mobile User Experience - @iRajLal
 
iOS 7 UI Guidelines
iOS 7 UI GuidelinesiOS 7 UI Guidelines
iOS 7 UI Guidelines
 
UIUX Design - report on summer training.docx
UIUX Design - report on summer training.docxUIUX Design - report on summer training.docx
UIUX Design - report on summer training.docx
 
User Experience & Design…Designing for others…UED
User Experience & Design…Designing for others…UEDUser Experience & Design…Designing for others…UED
User Experience & Design…Designing for others…UED
 
Ux ui presentation2
Ux ui presentation2Ux ui presentation2
Ux ui presentation2
 
Mobiles & usbaility
Mobiles & usbailityMobiles & usbaility
Mobiles & usbaility
 
Best UI UX Practices for Mobile App & Website Design by Harssh Trivedi.pdf
Best UI UX Practices for Mobile App & Website Design by Harssh Trivedi.pdfBest UI UX Practices for Mobile App & Website Design by Harssh Trivedi.pdf
Best UI UX Practices for Mobile App & Website Design by Harssh Trivedi.pdf
 
Design Theory - Ankur Sharma - Presentation
Design Theory - Ankur Sharma - PresentationDesign Theory - Ankur Sharma - Presentation
Design Theory - Ankur Sharma - Presentation
 
1 PROGRAM ISEM RESEARCH PAPER FOR APPLIED.docx
1 PROGRAM ISEM RESEARCH PAPER FOR APPLIED.docx1 PROGRAM ISEM RESEARCH PAPER FOR APPLIED.docx
1 PROGRAM ISEM RESEARCH PAPER FOR APPLIED.docx
 
Mobile First Approach - The key to cross platform interface design
Mobile First Approach - The key to cross platform interface designMobile First Approach - The key to cross platform interface design
Mobile First Approach - The key to cross platform interface design
 
Mobile Apps Design Principles
Mobile Apps Design PrinciplesMobile Apps Design Principles
Mobile Apps Design Principles
 
Good Design Principles for App Developer (UAB) 2017
Good Design Principles for App Developer (UAB) 2017Good Design Principles for App Developer (UAB) 2017
Good Design Principles for App Developer (UAB) 2017
 

More from Ivano Malavolta

More from Ivano Malavolta (20)

Conducting Experiments on the Software Architecture of Robotic Systems (QRARS...
Conducting Experiments on the Software Architecture of Robotic Systems (QRARS...Conducting Experiments on the Software Architecture of Robotic Systems (QRARS...
Conducting Experiments on the Software Architecture of Robotic Systems (QRARS...
 
The H2020 experience
The H2020 experienceThe H2020 experience
The H2020 experience
 
The Green Lab - Research cocktail @Vrije Universiteit Amsterdam (October 2020)
The Green Lab - Research cocktail  @Vrije Universiteit Amsterdam (October 2020)The Green Lab - Research cocktail  @Vrije Universiteit Amsterdam (October 2020)
The Green Lab - Research cocktail @Vrije Universiteit Amsterdam (October 2020)
 
Software sustainability and Green IT
Software sustainability and Green ITSoftware sustainability and Green IT
Software sustainability and Green IT
 
Navigation-aware and Personalized Prefetching of Network Requests in Android ...
Navigation-aware and Personalized Prefetching of Network Requests in Android ...Navigation-aware and Personalized Prefetching of Network Requests in Android ...
Navigation-aware and Personalized Prefetching of Network Requests in Android ...
 
How Maintainability Issues of Android Apps Evolve [ICSME 2018]
How Maintainability Issues of Android Apps Evolve [ICSME 2018]How Maintainability Issues of Android Apps Evolve [ICSME 2018]
How Maintainability Issues of Android Apps Evolve [ICSME 2018]
 
Collaborative Model-Driven Software Engineering: a Classification Framework a...
Collaborative Model-Driven Software Engineering: a Classification Framework a...Collaborative Model-Driven Software Engineering: a Classification Framework a...
Collaborative Model-Driven Software Engineering: a Classification Framework a...
 
Experimenting on Mobile Apps Quality - a tale about Energy, Performance, and ...
Experimenting on Mobile Apps Quality - a tale about Energy, Performance, and ...Experimenting on Mobile Apps Quality - a tale about Energy, Performance, and ...
Experimenting on Mobile Apps Quality - a tale about Energy, Performance, and ...
 
Modeling objects interaction via UML sequence diagrams [Software Design] [Com...
Modeling objects interaction via UML sequence diagrams [Software Design] [Com...Modeling objects interaction via UML sequence diagrams [Software Design] [Com...
Modeling objects interaction via UML sequence diagrams [Software Design] [Com...
 
Modeling behaviour via UML state machines [Software Design] [Computer Science...
Modeling behaviour via UML state machines [Software Design] [Computer Science...Modeling behaviour via UML state machines [Software Design] [Computer Science...
Modeling behaviour via UML state machines [Software Design] [Computer Science...
 
Object-oriented design patterns in UML [Software Design] [Computer Science] [...
Object-oriented design patterns in UML [Software Design] [Computer Science] [...Object-oriented design patterns in UML [Software Design] [Computer Science] [...
Object-oriented design patterns in UML [Software Design] [Computer Science] [...
 
Structure modeling with UML [Software Design] [Computer Science] [Vrije Unive...
Structure modeling with UML [Software Design] [Computer Science] [Vrije Unive...Structure modeling with UML [Software Design] [Computer Science] [Vrije Unive...
Structure modeling with UML [Software Design] [Computer Science] [Vrije Unive...
 
Requirements engineering with UML [Software Design] [Computer Science] [Vrije...
Requirements engineering with UML [Software Design] [Computer Science] [Vrije...Requirements engineering with UML [Software Design] [Computer Science] [Vrije...
Requirements engineering with UML [Software Design] [Computer Science] [Vrije...
 
Modeling and abstraction, software development process [Software Design] [Com...
Modeling and abstraction, software development process [Software Design] [Com...Modeling and abstraction, software development process [Software Design] [Com...
Modeling and abstraction, software development process [Software Design] [Com...
 
[2017/2018] Agile development
[2017/2018] Agile development[2017/2018] Agile development
[2017/2018] Agile development
 
Reconstructing microservice-based architectures
Reconstructing microservice-based architecturesReconstructing microservice-based architectures
Reconstructing microservice-based architectures
 
[2017/2018] AADL - Architecture Analysis and Design Language
[2017/2018] AADL - Architecture Analysis and Design Language[2017/2018] AADL - Architecture Analysis and Design Language
[2017/2018] AADL - Architecture Analysis and Design Language
 
[2017/2018] Architectural languages
[2017/2018] Architectural languages[2017/2018] Architectural languages
[2017/2018] Architectural languages
 
[2017/2018] Introduction to Software Architecture
[2017/2018] Introduction to Software Architecture[2017/2018] Introduction to Software Architecture
[2017/2018] Introduction to Software Architecture
 
[2017/2018] RESEARCH in software engineering
[2017/2018] RESEARCH in software engineering[2017/2018] RESEARCH in software engineering
[2017/2018] RESEARCH in software engineering
 

Recently uploaded

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 

Recently uploaded (20)

MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Cyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdfCyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdf
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 

UI design for mobile apps

  • 1. Gran Sasso Science Institute Ivano Malavolta UI design
  • 2. Roadmap Intro + Examples Human Interface Principles Platform Characteristics UX Guidelines
  • 3. Introduction Before focussing on UI…. in mobile you can always control Content naming Visual design
  • 4. Content Naming Before you start reasoning on the UI… Define an APP DICTIONARY Write down the terms and messages used in the app ex. –  “tweets” in Twitter –  “likes” in Facebook
  • 5. Visual Design The direct representation of everything under your app The first impression the user will have It is not only about layout & colors… it is about SENSORY SENSATIONS
  • 8. Roadmap Intro + Examples Human Interface Principles Platform Characteristics UX Guidelines
  • 9. Aesthetic Integrity It’s a measure of how well the appearance of the app integrates with its function •  Productive app à order & clarity •  Game à gamish, frivoulous •  …
  • 10. Consistency Take advantage of the standards and paradigms people are comfortable with Does it use system-provided controls, views, and icons correctly? Is the application consistent within itself? Does text use uniform terminology and style? Can people predict what will happen?
  • 11. Direct Manipulation Try to let your users direct manipulate objects in your app Users can experience direct manipulation when they: •  Rotate or otherwise move the device to affect onscreen objects •  Use gestures to manipulate onscreen objects •  Can see that their actions have immediate, visible results
  • 12. Feedback Acknowledge people’s actions and assures them that processing is occurring Users expect •  immediate feedback •  status updates during lengthy operations
  • 13. Metaphors You may use metaphors for objects in the real world in your app Users will quickly grasp how to use the app Ex. –  folders –  photo sliders –  …
  • 14. User Control People, not apps, should initiate and control actions Apps can suggest actions, but users must do them Apps can only infer data from the context Users expect to be able to stop an operation that’s underway
  • 17. Roadmap Intro + Examples Human Interface Principles Platform Characteristics UX Guidelines
  • 18. Display is Paramount  The DISPLAY is (usually) the only means that users use to interact with your app! •  The comfortable minimum size of tappable UI elements is 44 x 44 points •  The quality of app artwork is fundamental •  The user’s focus is on the content
  • 19. Display Orientation Users can rotate the device at any time and for any reason Users tend to expect apps to launch in the device orientation they’re currently using TIP. You can use the splashscreen image to let the user rotate the device
  • 20. Gestures Users don’t click, they use gestures –  tap/double tap –  drag –  zoom/pinch –  swipe –  flick Users expect all these gestures to work the same, regardless of the app they’re currently running
  • 21. User Help Keep onscreen user help as minimal as possible In general, users don’t need onscreen help content to tell them how to use the device or the apps Remember of the Consistency human-interface principle
  • 24. Roadmap Intro + Examples Human Interface Principles Platform Characteristics UX Guidelines
  • 25. Layout It is the first aspect to fix à you need pure feedback on it à lo-fi wireframing http://bit.ly/GTp82Q Tablets content scrolled horizontally
  • 26. Colors psychology Users react to different colors differently Colors evoke emotions BLU productiveness, interiors, skies, peace, unity, harmony, tranquility, calmness, trust, coolness, confidence, conservatism, water, ice, loyalty, dependability, cleanliness, technology…
  • 27. Color Palette Predefined number of colors to use consistently in your app You can use tools like palette choosers, or palette pickers from images OR You can define your palette manually through the color wheel http://kuler.adobe.com
  • 28. Color Wheel Complementary when you want something to stand out  Analogous choose one color to dominate, a second to support, the third color is as an accent http://bit.ly/GTv7on
  • 29. Color Wheel Triad let one color dominate and use the two others for accent   Square works best if you let one color be dominant http://bit.ly/GTv7on
  • 30. Typography It is about: •  selection of the correct font •  understanding sizes •  applying conventional design methodologies (size, shape, contrast, color, position, space, etc.) http://bit.ly/GTvuzj
  • 31. Readability guidelines 1.  Use a high-contrast typeface –  Devices are usually used outdoor 2.  Use the right typeface (font) http://bit.ly/GTwUtv
  • 32. Readability guidelines 3.  Provide decent leading –  Leading = the space between two lines 4.  Leave space on the right and left of each line 5.  don’t crowd the screen
  • 33. Readability guidelines 6.  Generously utilize headings –  Divide the content into paragraphs 7.  Use short paragraphs –  2-3 sentences at most
  • 34. Respect User-Entered data Input is hard, users slip (and sleep!) Do whatever it takes to preserve user data and plan for real-world behaviors
  • 35. Realize That Mobiles Are Personal one device for one person Don’t continuously ask for name, data, etc. Only implement passwords and clear personal information when required
  • 36. Ensure That Lives Take Precedence Don’t interrupt people’s life! Differently from desktops mobiles are glanced at, used in gaps between conversation and driving and watching TV
  • 37. Use Your Sensors Whenever possible, perform actions for the user based on sensors and user data Ex. Why should you have to silence your phone for a meeting, when the phone knows where you physically are and knows from your calendar that you have a meeting in that room right now?
  • 38. Focus on the Primary Task you need to determine what’s most important in each context or screen and… focus on it exclusively! Your app definition statement will help you focus on its primary task
  • 39. Give your users what they need most! For example, in a game, people care about the experience, they don’t expect to manage, consume, or create content •  Minimize the number of controls in the UI •  Customize controls so that they integrate with your app’s graphical style •  Fade controls away after people have stopped interacting with them for a little while Elevate the Content that People Care About
  • 40. Think Top Down Put the most frequently used information near the top Because users hold the device in the following ways: •  In the left hand and gesturing with a finger of the right hand •  In one hand, and gesturing with the thumb of the same hand •  Between their hands, and gesturing with both thumbs
  • 41. Logical Path Make the path through the information you present logical and easy to predict –  put markers to let them where they are –  put a back-button Give users only one path to a screen
  • 42. Easy Usage Your app must be instantly understandable by users à you cannot assume they want or they have time to learn how to use your app Make the main function of your app immediately evident
  • 43. User-Centric Terminology use terminology your users understand avoid technical jargon –  This does not hold if your target user is a technical guy
  • 44. Inputting information takes time and attention, minimize it TIP. If your app asks users a lot of input data, you have to revise your design! Balance any request for input by users with what you offer them in return Get information from the OS, when appropriate –  for example: contacts, address, events in the calendar… Minimize the Effort Required for User Input
  • 45. Enable Collaboration Push for collaboration and sharing with others When appropriate, make it easy for users to interact with others –  allow them to share things like their location, opinions, and high scores For tablets: think of ways to allow more than one person to use your app on the same device
  • 46. Brand Appropriately Incorporate a brand’s colors or images in a refined, unobtrusive way Avoid taking space away from the content people care about –  Alternative: subtly customize the background of a screen
  • 47. Make Search Quick In apps with a lot of data, SEARCH can be a primary function Build indexes of your data so that you are always prepared for search Live-filter local data so that you can display results more quickly Display a search bar above a list or the index in a list Display placeholder content right away and partial results as they become available
  • 48. Be Succinct Think like a newspaper editor, and strive to convey information in a condensed, headline style  When your UI text is short and direct, users can absorb it quickly and easily Give controls short labels, or use well-understood symbols users should tell what they do at a glance
  • 49. Use UI Elements Consistently Follow the recommended usages for standard user interface elements à you can build on users’ prior experience Avoid radically changing the appearance of a control that performs a standard action Never use the standard buttons and icons to mean something else
  • 50. Make Targets Fingertip-Size Display may change, but the average size of a fingertip does not! Give tappable elements in your application a target area of about 44 x 44 points If you create smaller controls, the app becomes much less enjoyable à or people may focus on the interface only, rather that content
  • 51. People should have confidence that their work is always preserved unless they explicitly cancel or delete it Never ask for saving data, it should be done automatically –  You can ask to either edit or delete data Ask People to Save Only When Necessary
  • 52. Make Modal Tasks Occasional Modality prevents users’ freedom by interrupting their workflow and forcing them to choose a particular path Keep modal tasks fairly short and narrowly focused Always provide an obvious and safe way to exit a modal task
  • 53. Start Instantly Avoid displaying an About window or a splash screen Avoid asking people to supply setup information Delay a login requirement for long as possible: –  Focus your solution on the needs of 80 percent of your users –  Get as much information as possible from other sources –  If you must ask for setup information, put it in your app’s settings
  • 54. Always Be Prepared to Stop Save user data as often as reasonable Save the current state when stopping
  • 57. A Final BAD example http://www.androiduipatterns.com/2011/11/cautionary-example-of-bad-design.html Layout & icons
  • 58. A Final BAD example Navigation buttons http://www.androiduipatterns.com/2011/11/cautionary-example-of-bad-design.html
  • 59. A Final BAD example Error Handling http://www.androiduipatterns.com/2011/11/cautionary-example-of-bad-design.html
  • 60. A Final BAD example Data Handling http://www.androiduipatterns.com/2011/11/cautionary-example-of-bad-design.html
  • 62. + 39 380 70 21 600 Contact Ivano Malavolta | Gran Sasso Science Institute iivanoo ivano.malavolta@univaq.it www.ivanomalavolta.com