• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
UI Design
 

UI Design

on

  • 1,203 views

Mobile Applications Development - Lecture 5 ...

Mobile Applications Development - Lecture 5

UI Design

Layout

Look & Feel

Colors

Typography

Graphics

This presentation has been developed in the context of the Mobile Applications Development course at the Computer Science Department of the University of L’Aquila (Italy).

http://www.di.univaq.it/malavolta

Statistics

Views

Total Views
1,203
Views on SlideShare
1,203
Embed Views
0

Actions

Likes
5
Downloads
132
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    UI Design UI Design Presentation Transcript

    • UI Design Ivano Malavolta ivano.malavolta@univaq.ithttp://www.di.univaq.it/malavolta
    • Some apps are just soshiny you want to lick them [cit.]
    • Roadmap• Intro + Examples• Human Interface Principles• Platform Characteristics• UX Guidelines
    • IntroductionBefore focussing on UI….in mobile you can always control Content Visual naming Design
    • Content NamingBefore you start reasoning on the UI…Define an APP DICTIONARYWrite down the terms and messages used in the appEx. – tweets in Twitter – Likes in Facebook
    • Visual DesignThe direct representation of everything under your appThe first impression the user will have It is not only about layout & colors… it is about SENSORY SENSATIONS
    • Example 1http://drbl.in/czjd
    • Anti-example 1
    • Roadmap• Intro + Examples• Human Interface Principles• Platform Characteristics• UX Guidelines
    • Aesthetic IntegrityIt’s a measure of how well the appearance of the app integrates with its function• Productive app order & clarity• Game gamish, frivoulous• …
    • ConsistencyTake advantage of the standards and paradigms people are comfortable withDoes it use system-provided controls, views, and icons correctly correctly?Is the application consistent within itself itself?Does text use uniform terminology and style style?Can people predict what will happen?
    • Direct ManipulationTry to let your users direct manipulate objects in your appUsers 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
    • FeedbackAcknowledge people’s actions and assures them that processing is occurringUsers expect• immediate feedback• status updates during lengthy operations
    • MetaphorsUse metaphors for objects in the real world in your appUsers will quickly grasp how to use the appEx. – folders – photo sliders –…
    • User ControlPeople, not apps, should initiate and control actionsApps can suggest actions, but users must do themApps can only infer data from the contextUsers expect to be able to stop an operation that’s underway
    • Example 2http://www.perspecdev.com/Faster/
    • Anti-example 2
    • Roadmap• Intro + Examples• Human Interface Principles• Platform Characteristics• UX Guidelines
    • Display is ParamountThe 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 OrientationUsers can rotate the device at any time and for any reasonusers tend to expect apps to launch in the device orientation they’re currently usingTIP.TIP You can use the splashscreen image to let the user rotate the device
    • GesturesUsers don’t click, they use gestures – tap/double tap – drag – zoom/pinch – swipe – flickUsers expect all these gestures to work the same, same regardless of the app they’re currently running
    • One App at a Time(at the moment) One app is visible in the foreground at a timeWhen people switch from one app to another, the previous app goes in background and its user interface goes awaySome applications might need to continue running in the background
    • User HelpKeep onscreen user help as minimal as possibleIn general, users don’t need onscreen help content to tell them how to use the device or the appsRemember of the Consistency human-interface principle
    • Example 3http://kangarooband.it/
    • Anti-example 3
    • Roadmap• Intro + Examples• Human Interface Principles• Platform Characteristics• UX Guidelines
    • Layout It should be defined the first aspect to fix you need pure feedback on it lo-fi wireframing Tablets content scrolled horizontallyhttp://bit.ly/GTp82Q
    • 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…http://mobiledesign.org/color
    • 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 wheelhttp://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 accenthttp://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 dominanthttp://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 high- – Devices are usually used outside 2. Use the right typeface (font)http://bit.ly/GTwUtv
    • Readability guidelines3. Provide decent leading – Leading = the space between two lines4. Leave space on the right and left of each line5. don’t crowd the screen
    • Readability guidelines6. Generously utilize headings – Divide the content into paragraphs7. Use short paragraphs – 2-3 sentences at most
    • Respect User-Entered dataInput is hard,Users slip (and sleep!)Do whatever it takes topreserve user dataand plan for real-world behaviors
    • Realize That Mobiles Are Personal one device for one personDon’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 SensorsWhenever possible, perform actions for the user based on sensors and user dataEx.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 Taskyou need to determine what’s most important in each context or screen and… exclusively! focus on it exclusively!Your app definition statement will help you focus your app on its primary task
    • Elevate the Content that People Care About Give your users what they need most! 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
    • Think Top Down Put the most frequently used information near the topBecause 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 hand, thumb of the same hand• Between their hands and gesturing hands, with both thumbs
    • Logical PathMake the path through the information you present logical and easy to predict – put markers to let them where they are – put a back-buttonGive users only one path to a screen
    • Easy UsageYour app must be instantly understandable by users you cannot assume they want or they have time to learn how to use your appMake the main function of your appimmediately evident
    • User-Centric Terminologyuse terminology your users understandavoid technical jargon – This does not hold if your target user is a technical guy
    • Minimize the Effort Required for User InputInputting information takes time and attention, minimize itTIP.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 returnGet information from the OS when appropriate OS, – for example: contacts, address, events in the calendar…
    • Enable CollaborationPush for collaboration and sharing with othersWhen appropriate, make it easy for users to interact with others – allow them to share things like their location, opinions, and high scoresFor tablets think of ways to allow more than one tablets: person to use your app on the same device
    • Brand AppropriatelyIncorporate a brand’s colors or images in a refined, unobtrusive wayAvoid taking space away from the content people care about – Alternative: subtly customize the background of a screen
    • Make Search QuickIn apps with a lot of data, SEARCH can be a primary functionBuild indexes of your data so that you are always prepared for searchLive-Live-filter local data so that you can display results more quicklyDisplay a search bar above a list or the index in a listDisplay placeholder content right away and partial results as they become available
    • Be SuccinctThink like a newspaper editor, and strive to convey information in a condensed, headline style When your UI text is short and direct users can direct, absorb it quickly and easilyGive controls short labels, or use well-understood labels well- symbols users should tell what they do at a glance
    • Use UI Elements ConsistentlyFollow the recommended usages for standard user interface elements you can build on users’ prior experienceAvoid radically changing the appearance of a control that performs a standard actionNever use the standard buttons and icons to mean something else
    • Make Targets Fingertip-SizeDisplay 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 pointsIf you create smaller controls, the app becomes much less enjoyable or people may focus on the interface only, rather than the content
    • Ask People to Save Only When NecessaryPeople should have confidence that their work is always preserved unless they explicitly cancel or delete itNever ask for saving data it should be done data, automatically – You can ask to either edit or delete data
    • Make Modal Tasks OccasionalModality prevents users’ freedom by interrupting their workflow and forcing them to choose a particular pathKeep modal tasks fairly short and narrowly focusedAlways provide an obvious and safe way to exit a modal task
    • Start InstantlyAvoid displaying an About window or a splash screenAvoid asking people to supply setup informationDelay 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 StopSave user data as often as reasonableSave the current state when stopping
    • Example 4http://instagr.am/
    • Anti-example 4
    • A Final BAD example Layout & iconshttp://www.androiduipatterns.com/2011/11/cautionary-example-of-bad-design.html
    • A Final BAD example Navigation buttonshttp://www.androiduipatterns.com/2011/11/cautionary-example-of-bad-design.html
    • A Final BAD example Error Handlinghttp://www.androiduipatterns.com/2011/11/cautionary-example-of-bad-design.html
    • A Final BAD example Data Handlinghttp://www.androiduipatterns.com/2011/11/cautionary-example-of-bad-design.html
    • And maybe a good one… …developed in one single night…http://www.musicatch.info
    • ReferencesChapter 8 http://bit.ly/H4GnKZ http://bit.ly/H4Gqq5
    • BRAINSTORMING