User Interface Design - Home
Contents
1. User Interface Design MIT Walailak University by Dr Wichian Chutimaskul Dennis Copyright 2009 J ohn Wiley amp Sons Inc Ch11 WILEY Objective Understand the principles of user interface UI design Understand the process of user interface design To design the user interface structure amp standard Understand the principles and techniques for navigation design input design output design Be able to design a user interface 2 59 Systems Analysis and Design SDLC 1 Planning Preliminary Investigation Scope Analysis 2 Analysis Problem Analysis Requirement Analysis Logical modeling design Decision Analysis 3 Design System Architecture network model H W amp S W specification security Plan Testing Conversion data amp system Training IS Application Class amp Object GUI I O 4 Implementation 5 Maintenance Operation amp Support 3 59 1 Information what 2 Requirement Specification 3 Diagram Functional analysis Use Case Diagram Structural analysis Class Diagram Specification Contract 1 Technology how 2 Design Specification Architecture Interface Data amp Process 3 Diagram e Behavior model Interaction Diagram State Diagram e Activity Diagram e Specification perspective Class Diagram 4 59 Introduction Principles for UI Design UI Design Process Navigation Design Input Des2. Social Secunty H Salutation Curent Date First Name Middle Hame Last Name Address Line 1 Other Information Address Line amp State lt Code a GOOD FLOW Whitten 37 59 Type of Input Validation Types of Validation When Would You Use Each of 1 Completeness check 2 Format check 3 Range check These 4 Check digit check Validation 5 Consistency check Methods 6 Database checks 38 59 Input Prototype for Web Interface a a SoundStase Videos mILOG IN cranar Prone a Entertainment A ee Club a a a Videos a Videos Help Order Tracking Basket Checkout Search J DTS ony GigE ld Matrix videos YES fi 18 99 18 99 Click Update after you have made a change in Quantity Update l abrowse by Category mi Comedy Sub Total 18 99 Shipping UPS second Day Air 7 95 FedEx UNITED STATES g POSTAL SERVICE Express 4 tStandard shipping items may be shipped via USPS Priority First Class Mail FedEx or UPS To a p i calculate your total delivery time please view our delivery map Sndstage com does not ship on Sunday or national holidays a me Home Privacy Statement Store Locator Help Contact Us Company Info Jobs a a of Whitten 39 59 6 Output Design Understand report usage Frequency Real time or batch reports Manage information
3. down list box 6 Combo box 7 Slider When Would You Use Each of These Box Types bs of _ Boxes Bian Baen EER _ he Meisce SETH e Test Bos i Select where yom were borir Sample Input Form Wh ant is vonr major U Check one onb MILs Acc oom Pier etime Companies Sierot Mila eee nit pegs i What soditerace do wow Peel comfortable msi U Check all that apply word FF Sordi erfect O Exceed D Botas 1 2 3 E Access pT imal Can ds ates hes Canada Miorthemi ance Easctem US Cerna U S Southam Ls Westem iS Fac US Haan Alaska Other WS Medco hice Mort Ae J Ga ae a 33 59 34 59 e Bad Flow in a Form Advanced GUI Components HA Examples of Advanced Input Controls I Bad Entry Layout Drop Down Calendar Control Check List Box Applicant Inf aee A 2 12 00 Social Security Salutation Curent Date Other Infomation Slider Edit Control Ei First Name Masked Edit Control jiz g j923 9239 Middle Name Elipsis indicating additional detail Click for options na B City Alternate NWumenc Spinner Control O ie tern 4 MO Address Line 2 i EC Item 5 b BAD FLOW 1 Item 5 1 nternet Hyperlink Control LE ltem 51 1 http sewa micro sork com E ltem s7 KE Whitten 35 59 Whitten 36 59 Good Flow in a Form Good Entry Layout Applicant Information
4. load All needed information Type of reports When Would You Use Each of Type of Reports Detail Summary Exception Reports Internal External Outputs Turnaround Document Graphs These Report Types 40 59 Internal Output For owners and users within an organization Detailed reports wA S oundStage Entertainment Club Detailed PRODUCTS ORDERED ON 1 25 2000 P O Product Product Quantity Number Number Type In Stock H2312 102774 Merchandise 232 2532522 Title 23 232392 Title a PL 222332 Merchandise 546566 Title Title Title Title Merchandise 4343434 Merchandise 3434344 Title Summary Report SoundStage Entertainment Club Summary PRODUCT SALES SUMMARY AS OF 1 25 2000 Product Product Current Moniii s Type Category Ghit Safes Merchandise Clothing rod Media Accessory FA Audio BEY 20 4359 Game Title Il 234 12 445 Video Title View Additional Reports Whitten 41 59 Whitten 42 59 Exception Report External Output 1 SoundStage Entertainment Club Exception External outputs leave an organization DELINQUENT MEMBER ACCOUNTS AS OF 1 25 2000 Intended for customers suppliers partners Number Name Area Code Phone Balance Due 112312 Joe Dunn J23 459 6565 5056 OT regulatory agencies Bob Fischer cue ears SAE save ee Fras Turnaround documents are external Kevin Dittman B23 Rick Carlina 787 15 22 outputs that eventually re enter the arb Fal 454 4 5 6
5. 3 Acknowledgment message These Pi 4 Delay message Message 5 Help message Types 27 59 28 59 5 Input Design The goal is to simply and easily capture accurate information for the system Capture data at the source gt reduce duplicate work processing time cost amp error Reflect the nature of the inputs Batch vs Online Find ways to simplify their collections Source data automation Minimize keystrokes 29 59 Online vs Batch Processing Online processing immediately records the transaction in the appropriate database Batch processing collects inputs over time and enters them into the system at one time in a batch Remote batch processing 30 59 Source Data Automation Can be obtained by using the following technologies ae ea Donte T Ne Pate faeces tines bar code readers mH Ty optical character recognition a 1 1 Cte oie acd yw ea il magnetic stripe readers vin WN Smart cards Biometric pan OAE How can internet be used for source data automation 31 59 Minimize Keystroke Never ask for information that can be obtained in another way List selection is more efficient than entering information Use default values where possible 32 59 Type of Inputs Text Numbers Selection boxes Types of Boxes 1 Text box 2 Check box 3 Radio button 4 On screen list box 5 Drop
6. E WHS FREE 55 CR I Oo i MAETCAR 2000 MHS CLOSEOUT Pao SS CRI Ls B To og tO SOUS Tai Smeets WERE LED TO FAT FOR PART OF THES UHC WE APPRECIATE THE FINE MANNEF IN eed YOL HAVE PAID OH TOUR QUOT IN ere es Teo WE HAVE ADDED 7 SOUNDS TASE CAEDITS TO TOUR ASO UNT BASH T CRESTS BY PAYING THIS ACHE BY THE DUE DATE SubTotal Bao oa Shipper 6 Handing 0 Taxes s3295 TOTAL Oiee Liss Oriy PA TO p oE a as ee Mirka checis payahe io RETURN TOF PORATION HTH FATHENT Whitten 46 59 Whitten Output Implementation Method 1 Printed output Tabular output presents information in columns Zoned output places text and numbers into designated areas 2 Screen output Graphic output is the use of pictorial charts to convey information in ways that demonstrate trends and relationships that cannot be easily seen in tabular formats 3 Point of sale terminals 4 Multimedia 5 E mail 6 Hyperlinks 7 Microfilm 47 59 Selection Criteria Line Chart Line charts show one or more series of data over a period of time They are useful for summarizing and showing data at regular intervals Each line represents one series or category of data Area Chart Area charts are similar to line charts except that the focus is on the area under the line That area is useful for summarizing and showing the change in data over silt Each line represents one series or category of ata Bar Chart Bar chart are useful for compar
7. Kenny Bum f 11 a system as Inputs Most bills and invoices include a stub to be returned by the customer with payment 44 59 Whitten 43 59 Whitten Whitten External Document ie Soundstage Entertainment Club PEUR SS A GN D ORDER a Gace te en E ee Lae code ras ecereey e amd i T NUMBER Tizat2 Tee Ship Toc CES Fox Wideo Dtsiibudon SourdStage Enimie Chu PETSA Flee DR Bhangerey Haein SAH Hothyerocs CA A See Ciarain Cire eRarepois IH 4S Slaw Ware Ths Phanien Miorot VHS Sia Ware The Panton Menaos Dv Doty Cipta Star Wars The Phanom Menace Ovi OPS Slaw Wars Tite Pram Mies Paan Ih Seger Wits Wiss Pranim Bipran Giuria CAM Stee Wars The Phanien Menoe Thier Posi 1 Pie tered hep cope oF pe mee 2 Ene pa order in amio wen fee procs ter darey metho ered Ses led bere I ees SS Gn ees FP ye ee Le a et Madge Worthy o1 Beara by 45 59 Turnaround Document SoundStage Entertainment invokes Mo 308231 A ED Ee 2630 Darem Orma Hiag B brecharemgeees IP GI a a A E E aur aod eee _ INVOICE __ Customer KATRINA SMITH Case Dais aot B13 CU OR Che hbo 3210 LITTLE ROCK Ti AR ZIP 47653 IAH Payment Ami Deit Bog prere pion eih bapti py Daecriatian Lind Prica TOTAL i POE HELL FREECES OVER JOWO DO Sr So S15 Sm i GRAMMY BOE CO uN Ss AS 3 CRESS S21 5 S21 99 i WATH THE WANDO CHECTORS CUT An DE STTS S17 oo i SIKTH SEMSE VHS FREE 5 CR Bo Oat i A BLAS LIF
8. caios Help 10 59 Layout Example Paten brabo eon Paten i hiana Cip Dane Poo Ep Code Posa Do C e Stee ree Tp eee tel eee ee hotel bore 11 59 2 2 Content Awareness All interfaces should have titles Menus should show where you are where you came from to get there It should be clear what information is within each area Fields and field labels should be selected carefully Use dates and version numbers to aid system users 12 59 Human Engineering Guidelines The user should always be aware of what to do next Tell the user what the system expects right now Tell the user that data has been entered correctly Tell the user that data has not been entered correctly Explain to the user the reason for a delay in processing Tell the user that a task was completed or was not completed Display messages and instructions long enough so user can read them Whitten 13 59 Which error message is most helpful Error No 217 You have entered an invalid date The date format you have used is not valid Use dd mm yyyy Press Help for more information Is this a helpful warning AN You are about to delete the Client Record for Yellow Partridge Jewellery Are you sure f Cancel Help Bennett 14 59 2 3 Aestheti
9. cannot be used Confirm actions that are difficult or impossible to undo Simplify recover from mistakes Use consistent grammar order 24 59 Type of Menu Common Type of Menu Doge Oe ee Tool Ber meih Sees eee cece eet sce Few ee e ed eee ee ee ees eee OG ee modo Sacer Beet fee cee eee i eee ee ee e eee eee Gees ee Type of Menu Typeot Men When 1 Menu bar Would You 3 Pop up menu Use Each of 4 Tab menu These Menu 2 Drop down menu Cascade menu 5 Toolbar Types 6 Image map d e SS Oe eee Ee ee ee y D Ee Sas Oe ed C SS SS oa E e Sa 25 59 26 59 Example of an Image Map Message Tips Welcome the Sheraton s Hawan Netecape E Should be clear concise and complete Fie Edt View Go Connmuracator Help lv cs 342e2t so st f Should be grammatically correct and free of gt Back Forward Aebad Home Search Gude Prt Secunty l i ai we Bookmarks A Wetester httpc eee sheratonhava com gt feralont The Best Locations ahead A jargon and abbreviations Avoid negatives and humor Type of messages Types of Messages When When arfs Graphical compass of stas they found a place of abriost celestial _ Image Map W ould You On the Best Beaches AGA dakai Monday Oct 26 a Tool tip 1 Error message lurinous Ae 2 Confirmation message Use Each of at the heart of the 2 4
10. cs Interface design for pleasing the eye Interfaces need to be functional and inviting to use Avoid squeezing in too much particularly for novice users Design text carefully Be aware of font and size Avoid using all capital letters Colors and patterns should be used carefully 15 59 2 4 User Experience Usability concept Easy to use learn understand useful Consider adding shortcuts for the expert 2 5 Consistency Enables users to predict what will happen Reduces learning curve 16 59 2 6 Minimize Effort Three clicks rule for getting information Minimal User Input Try to design systems so that users do not have to make unnecessary key presses or mouse clicks Use codes and abbreviations Select from a list Edit incorrect values rather than retype them Provide information that can be derived automatically Use defaults Use accelerator keys for menus 17 59 3 User Interface Design Process Use scenario a development Interface aie ape evaluation design Interface Interface design standards prototyping design a od 18 59 1 Use Scenario Development Outline the steps to perform tasks 2 Interface Structure Design Show dialog chart Shows how all screens forms and reports are related 3 Interface Standards Design Basic design elements for screen form and report 4 Interface Design Prototyping A simula
11. e age SIZE e Fields and columns should be clearly labeled a Page orientation portrait landscape Reports should include legends for all abbreviations Information should never have to be manually edited Page column heading Information should be balanced across the page or screen Provide for easy navigation within information e Avoid computer jargon and most error messages 2 The timing of outputs is important Heading alignment left right center Column spacing ee E Format 3 The distribution of outputs must be sufficient to assist all relevant users Control breaks 4 Outputs must be acceptable to the system users who End of report will receive them Whitten 51 59 52 59 Consider Under what conditions would you be most likely to replace reports on paper with ones delivered electronically When might you NOT want to make the change 53 59 User interface design for usability Principles for good interface design layout content aesthetics user experience consistency and minimum user effort The design process focuses on user actions diagramming the structure standards prototyping and evaluation Navigation design for simple use the system Input design Output design 54 59 Question and Answer 55 59 Quiz The fundamental part of the user interface that permits the system to capture information is the input mechanism 2 The user interface design
12. ign Output Design 5 59 1 Introduction User interface defines how the system will interact with external entities System interfaces define how systems exchange information with other systems Navigation mechanism provides the way for users to tell the system what to do Input mechanism defines the way the system captures information Output mechanism defines the way the system provides information to users or other systems Graphical user interface GUI is the most common type of interfaces 6 59 Interface Problem Interface problems result in confusion panic uasenun frustration utos boredom misuse abandonment and other undesirable consequences Causes Excessive use of computer jargon and acronyms Non obvious or less than intuitive design Inability to distinguish between alternative actions what do I do next Inconsistent problem solving approaches Design inconsistency Whitten 7 59 2 Principles for User Interface Design Layout Content Awareness Aesthetics qunasmw User Experience Consistency Minimal User Effort 8 59 2 1 Layout Concept The screen is often divided into three boxes Navigation area top 2 Status area bottom 3 Work area middle Areas and information should minimize user movement from one to another 9 59 Layout Example System Harigation be OOE Metec ap Fie Edi We Go Commure
13. ignment Design your project Input Design Output Design User Interface Design 59 59
14. ing series or categories of data Each bar represents one series or category of data Column charts are similar to bar charts except that the bars are vertical Also a series of column charts may be used to compare the same categories at different times or time intervals Each bar represents one series or category of data Whitten 48 59 Column Chart Graph concluded Output Design with a odem CASE Tool soundstage Entertainment Club Selection Criteria BEA Ee min Pie Chart Pie charts show the relationship of parts to a whole i They are useful for summarizing percentages of a Member ame 7 gt whole within a single series of data Each slice represents one item in that series of data L PUE REEE l Options Identifier amp Derivation Opt Multiple Selection IX Notify Sake IX Sort IX Standard Donut Chart Donut charts are similar to pie charts except that they L I No Redraw I Owner Draw Fixed i 1 i Multi Column Owner Draw Variable can show multiple series or categories of data each as gt e a tae Pie its own concentric ring Within each ring a slice of No Integral Height Keyboard Input that ring represents one item in that series of data J g m oo Whitten 49 59 Whitten 50 59 Output Design Guideline Tabular Report Design Principles 1 Outputs should be simple to read and interpret p Every output must have a title time and dat
15. principle that places an emphasis on the ease of use and the ease of learning the interface is user experience 3 Using a diskette to represent saving a file is an example of an interface icon 4 Storyboard is the prototyping technique that is least expensive but provides the least amount of detail 5 Novice and expert users are both usually most concerned with ease of use of a new system 56 59 6 The navigation design principle that results in the provision of an undo button is simplify recovery from mistakes 7 The type of menu that often contains multiple word menu items and that may display cascading menus is called a drop down menu 8 A confirmation message is used when the user selects a potentially dangerous choice such as deleting a file 9 A check box is a selection box that permits the user to select only one item from a mutually exclusive list 10 A consistency check ensures that combinations of data are valid for example does the zip code of an address correspond to the city 57 59 11 The overall flow of screens and messages 1s calleda_ 12 ____menus use pictures to represent menu options in the main body of the window 13 ___1s a type of data entry that remains the most common form of input a is a pointing device used in conjunction with graphical user interfaces It has made it easy to navigate on line forms and click on commands and input options 58 59 Team Ass
16. tion of screen form or report using paper storyboard etc 5 Interface Evaluation To improve the interface design before the system is complete 19 59 Dialog Chart apply for your project c lt WindoWs gt Main Menu aor A aget Ne t g lt ewindow gt gt zewindowss lt ewindoW gt gt Manu A Manb AN g Menu C 6 4 4 N 4 4 i iA A 7 i of g 5 J 7 saloms i lt eroporte gt lt elotmes i e lt fopotta gt celoms ceropottes Form A Report F Form J Report K Fom X a Rapo 2 P lt aclor cctoporlss zatiri Form 6 Raport L Raport Y 20 59 Storyboard Example Find a Cliant Typa in information to search on Firet Hama laat Mam Adame 21 59 User Manual Is the last step for user interface design process To document the procedures screens forms reports and dialogues Given a well designed user interface a well written user manual and adequate training the user should be able to access and utilise the system with little or no additional help Whitten 4 Navigation Design Basic Principles Assume users have not read the manual have not attended the training do not have external help All controls should be clear understandable and placed in an intuitive way on the screen Type of navigation control language menu icons 23 59 Basic Principles Prevent mistakes a Limit choices Never display commands that
Download Pdf Manuals
Related Search