• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Ui ux designing principles
 

Ui ux designing principles

on

  • 8,501 views

for education only

for education only

Statistics

Views

Total Views
8,501
Views on SlideShare
8,500
Embed Views
1

Actions

Likes
14
Downloads
327
Comments
0

1 Embed 1

https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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 ux designing principles Ui ux designing principles Presentation Transcript

    • An Introduction to User Interface Design and Usability Workshop on UI & UX May 2010 For educational purpose only.
    • Outline• UI Design in Modern Application• The Art & Science of Layouts• UI Typography: Guidelines & Common Mistakes• Guide to Fantastic Color Usage• Usability Principles for Modern UI Design• Common UI Design Patterns
    • Section 1UI DESIGN IN MODERNAPPLICATION
    • UI Design in Modern Application• User Interface (UI) is not about how it looks, but rather about how it works.• Interface is your product.• Primary aim: communication.• The main goal in UI design: Simple & elegant, clear & consistent.
    • Eight Characteristics in Good UI Design1. Clarity2. Concision3. Familiarity4. Responsiveness5. Consistency6. Aesthetics7. Efficiency8. Forgiveness
    • Main Building Blocks of Visual Interface Design• Layout & Positioning• Shape & Size• Color• Contrast• Texture
    • Practical Techniques for Crafting Effective UI• Use white space to build relationships• Rounded corners define boundaries• Convey meaning with colors• Direct attention• Shadows and darkened background for focus• Emphasize core actions• Use hover controls to simplify & de-clutter• Labels inside input fields• Context-sensitive interface element• Icons• Make it responsive: loading indicators & pressed state• Undo & restore• Confirmation dialogs
    • Use white space to build relationships• Definition of white space – empty spaces between various content elements• Great tool to tell relationships between content elements.• Tight space forms grouping, vice versa
    • Rounded corners define boundaries• Aside from polishing your interface, rounded corners actually defines borders
    • Convey meaning with colors
    • Direct Attention• Use animation to direct attention.• Color and contrast are not enough.
    • Shadows and darkened background for focus Source: vhc.apptivity.com
    • Emphasize Core Actions• Shift focus to primary actions for your user
    • Use hover controls to simplify & de-clutter• Hover controls:• De-clutter:
    • Labels inside input fields• Save space & emits clear messages
    • Context-sensitive interface element• Additional functionality for experienced users without complicating the interface
    • Icons• Good practices of modern icon design are as listed in Android Launcher icon design guidelines: Source: developer.android.com
    • Make it responsive: loading indicators & pressed state• Do not make your user wait without any indicators
    • Undo & restore• Be forgivable• Provide extra protective measures for your users
    • Confirmation dialogs• To ensure that the user really wants to go ahead• Always provide other options close by• Do not overuse: will introduce interface friction
    • 改善 (kaizen)“UI design, especially in modern web application,doesn‟t have to be in a finished state because you can always keep evolving it and improving it.” • Dmitry Fadeyev Designer/Developer Founder of usabilitypost.com, themesboutique.com, logospire.com
    • Section 2THE ART & SCIENCE OF LAYOUTS
    • Four Major Layout Types Fixed- Width Layout Hybrid Fluid Types Elastic
    • Fixed-Width Layout• Static grid layout with its width with fixed value, in pixel unit.• Good for precise interface design.• Not recommended for Web application. <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width= "200" /> <ColumnDefinition Width="200" /> </Grid.ColumnDefinitions> </Grid>
    • Fluid Layout• Adjust its width in proportion to the size of the user‟s view port.• Provides user the freedom to resize the application.• Designer must design carefully: resize impact on text display and overall interface. <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width= "200*" /> <ColumnDefinition Width= "Auto" /> </Grid.ColumnDefinitions> </Grid>
    • Elastic (Zoomable) Layout• Scale the content instead of overall size of the layout.• Advantage: design proportion is well kept, ensuring proper readability & positioning.• Disadvantage: design proportion are not easy to keep when manipulating with text size.• Silverlight tool for image manipulation: – Silverlight Deep Zoom
    • Mathematics in Design Golden Ratio Design• The Golden Ratio layout (1:1.618033987)• Good practice in layout designs• Best for photo galleries, portfolios and product- oriented websites.
    • Calculation with Golden Ratio 62% 38%To calculate the width of GoldenRatio, get total width of arectangle and divided by 1.616(top). Apply the Golden Ratio toget the height for a specificrectangle based on the totalwidth of the rectangle (right).
    • Golden Ratio Sample Layout (1) Source: net.tutsplus.com
    • Golden Ratio Sample Layout (2)• 6 Golden Rectangles, 3 rectangles per line, each 299 x 185 pixels.• 299/185 = 1.616 Source: spacegeek.com
    • Mathematics in Design Fibonacci Design• Based on Fibonacci sequence – 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144...• The Golden Spiral• Applicable to layout and font size• Best for blogs and magazine layouts
    • Fibonacci Design Sample Layout• Fibonacci sequence on columns and font size
    • Gutenberg Rules• Defines Reading gravity.
    • Applying Gutenberg Rules Source: goodbarry.com
    • Section 3UI TYPOGRAPHY: GUIDELINES &COMMON MISTAKES
    • Introduction• Typography is a powerful medium that allows for precise, effective communication.• Typography exists to bring orders to information by dividing and organizing – helps user to get what they are looking for. – i.e.: make textual stuff looks pretty!
    • Designer’s Main Concern• Readability• Measure (Line Length) – Width of the block• Leading (Line Height) – Height of a line in the block• Tracking (Letter Spacing) – Tips: check if “VV” and “W” are distinguishable• Word Spacing• Color: Strive for consistency.
    • Typography & GridExample of modern Typography UI with good use of grid & negative space: Source: www.montylounge.com
    • Choosing the “Right” Type• Consider context & narrative – “The quick brown fox jumps over the lazy dog”• Choose by the typeface‟s specific functions – Brush Script is common, with its bad readability, it is not built for serious text blocks. – Microsoft Expression Blend choose Segoe UI as default font for good readability.
    • Choosing the “Right” Type• A beautiful face is the one that serves its purpose. Both typefaces are from the serif family, however, Haptic (left) is attention-seeking header, Mrs. Eaves XL (right) is for good readability
    • Good Font Size• Define a set of font size and do not change• Classic scale: 8 9 10 11 12 13 14 18 21 24 36 48 60 72• Fibonacci Sequence: 8 16 24 40 64 104
    • Good Practice• Pay attention to Widows and Orphans – Creates awkward rags, impairing readability. “An orphan is left behind where as a widow must go on alone” This is bad for UI design.
    • Good Practice (cont)• Clean rags and hyphenation 5 hyphenations A poor rag (top) in a row is creates distractingunforgivable (top), shapes in the white this can easily space of the margin. avoided by Correct this by changing the line making manual line breaks (bottom) breaks (bottom). Source: fonts.com
    • Good Practice (cont)• Hanging punctuation – Place bullets points, punctuation marks before a justified paragraph. – Avoiding reader‟s flow to be disrupted
    • Good Practice (cont)• Treat text as a user interface Source: cameronmoll.com
    • Common Mistakes in Typography• Using double hyphens instead of resized dash• Using periods instead of ellipses• Using dumb quotes "" instead of “”• Double-spacing between sentences
    • Common Mistakes in Typography (cont)• Improvising a copyright symbol.• Using too much emphasis.• Underlining your hypertext links with border-bottom
    • Common Mistakes in Typography (cont)• Faking families in Photoshop• Not using accent characters• R4nDomz cAp!taLizAti0n & uNNec3s2ary sYmBÖlz! (Öᴥ<)/• Comic Sans is a sin! Do not use!
    • Section 4GUIDE TO FANTASTIC COLOR USAGE
    • Simple Must-Do List When Designing with Color1. Choose the right color palette2. Pump your color schemes to your prototype3. Get feedbacks
    • 1. Choose the Right Color Palettes• Understand the meaning of colors
    • Warm Colors• Red (Primary), Orange (Secondary), Yellow(Primary)• Reflects passion, happiness, enthusiasm, and energy.
    • Warm Colors• Red – hot & emotional color. Keywords: fire, violence warfare, love, passion, anger, importance• Bright Red = energetic; Dark red = Powerful & elegance Source: darkcrimson.com
    • Warm Colors• Orange – vibrant and energetic color. Keywords: Friendly, Inviting, Change and Movement Source: neighborino.com
    • Warm Colors• Yellow – brightest/energizing color. Keywords: happiness, sunshine, deceit, cowardice, danger Source: foodtease.com
    • Cool Colors• Green(Secondary), Blue(Primary), Purple (Secondary)• They are the colors of night, of water, of nature, and are usually calming, relaxing, and somewhat reserved.
    • Cool Colors• Green – down-to-earth color. Keywords: new beginnings, growth, renewal, abundance, jealousy, inexperience• Bright green = energetic; dark green = stability Source: i-avion.com
    • Cool Colors• Blue – emotional-impact color. Keywords: sadness, calmness, responsibility, peace, spiritual• Light Blue = Calm; Bright Blue = Energetic; Dark Blue = Reliable Source: sman96.com
    • Cool Colors• Purple –royalty color. Keywords: creativity, imagination, romance• Light Purple = Romantic; Dark Purple = Wealth & Royalty Source: avantgrape.com
    • Neutral Colors• Neutral colors often works as backdrop colors. – Associates with Warm and Cool colors
    • Neutral Colors• Black: Mystery, Elegance, Evil• Gray: Moody, Conservative, Formality• White: Purity, Cleanliness, Virtue• Brown: Nature, Wholesomeness, Dependability• Tan or Beige: Conservative, Piety, Dull• Cream or Ivory: Calm, Elegant, Purity
    • Neutral Color• But they can also be used on their own in designs, and can create very sophisticated layouts. Source: timeger.com
    • Pick Your Palettes• Color Palette is your color scheme Example of Monochromatic Color Palette• Pick your favorite tone that matches the mood of your application and generates a color scheme that goes well with it.• Tips & tricks: – Use a good photograph to create a color scheme. – Get sample color palettes from 3rd parties
    • Pick Your Palettes• Get colors from your environment
    • Pick Your Palettes• With Photoshop• With Kuler
    • Pick Your Palettes• With Photoshop• With Kuler
    • Color Schemes Samples• Scheme
    • Color Schemes Samples• Scheme
    • Awesome Tools for Color Picking• Adobe’s Kuler – http://kuler.adobe.com – Community based• ColoRotate – http://www.colorotate.org/ – Color Generator for the Colorblinds
    • Awesome Tools for Color Picking• Color Blender – http://www.colorblender.com – Auto generates palettes• COLOURlovers• http://www.colourlovers.com/ – A network of colour lovers!
    • 2. Pump your color schemes to your prototype• Draft out your prototype on a piece of paper or on Expression Blend, preferably in monochromatic outlines only.• Reconsider of your color palettes: – Which color represents your application the most?• Fill the colors and experiments with different combinations – Which color is the most suitable for a particular part of the application?
    • 3. Get FeedbacksAfter reviewing your UI design, get feedbacks from:• Your team members & mentor• Your users or clients• The professionals• Your family members & best friends• And any public citizen who is not afraid to mock your design…
    • Section 5USABILITY PRINCIPLES FORMODERN UI DESIGN
    • Usability?• The ability to use something and how easy that something can be used.• How we measure usability of a product? – Requires less mental effort to use. – Less mistakes when using it. – Do more, with less (steps, clicks, etc). – Intuitive: Easy to learn/use & familiar to user.
    • Usability: Rules & Principles• 7 2 Principle (Web app) – Humans‟ short term memory can retain only about 5-9 things at one time (George A. Miller) – Limit no. of options in any navigation menu to 7 2.
    • Usability: Rules & Principles• 2-Second-Rule (All) – User should not wait more than 2 seconds for any response. – „Tell‟ the user if they really need to wait > 2 secs. – Example: Progress bar, Facebook „loading‟ animation.
    • Usability: Rules & Principles• 3-Click-Rule (All) – Access information/feature within 3 clicks. – Emphasizes the importance of clear navigation, logical structure and easy-to-follow hierarchy.
    • Usability: Rules & Principles• Eight Golden Rules of Interface Design (All) – Strive for consistency. • Button‟s name. – Enable frequent users to use shortcuts. • Keyboard shortcuts in Firefox, Gmail. – Offer informative feedback. • Saving a file. – Design dialog to yield closure. • Account creation.
    • Usability: Rules & Principles• Eight Golden Rules of Interface Design (All) – Offer simple error handling. • Minimize error, graciously handles errors. Ex: date input. – Permit easy reversal of actions. • Undo/back option. – Provide the sense of control. • User control app, don‟t force/control user. – Reduce short-term memory load. • No information overload, offer hints/getting started guide.
    • Section 6COMMON UI DESIGN PATTERNS
    • Pattern?• A pattern describes an optimal solution to a common problem within a specific context. Design pattern?
    • Selected Design Patterns• Auto Complete – Allows faster user input by removing ambiguity about expected input data, avoiding potential mis-typed information as well as narrowing down the correct choices.
    • Selected Design Patterns• Movable Panels – Allows users to organize information that make sense to them.
    • Selected Design Patterns• Calendar/Date Picker – Enables users to easily apply or submit a date or date range with some default values.
    • Selected Design Patterns• Progress/Busy Indicator – Allows the user to know the status of their operation if the operation takes more than 2 secs or so.
    • Selected Design Patterns• Input Hints – Some explanation and/or examples of valid values near fields to give users hints at the kind of input they need to provide.
    • Selected Design Patterns• Sortable Table – Allow users to change the sorting order of the table items by clicking on a column header.
    • Resources• “The Smashing Book” by Smashing Networks• Smashing Networks – http://www.smashingmagazine.com/• Yahoo Design Pattern Library – http://developer.yahoo.com/ypatterns/• Designing Interfaces – http://designinginterfaces.com/