Page 3
1. Introduction goupee.vn A system‟s user interface includes goupee.com [1] Screens for navigation through system [2] Screens and forms that capture data [3] Reports produced by system (paper, screen, other media) User-interface design requires: Principles and processes Interface structure and standards I/O design Navigation design Interface design defines how system interacts with other external entities Humans and other software systems System interfaces designed during integration Defined as part of physical architecture and data management layers HCI layer defines: Way in which users interact with system I/O accepted/generated by system Has three parts: [1] Navigation mechanism (in a WIMPS environment, e.g. buttons, menus, etc) [2] Input mechanism (e.g. windows containing dialogues, forms, etc) [3] Output mechanism(e.g. web pages, reports, etc) fb.com/goupee.vn 3 CuuDuongThanCong.com https://fb.com/tailieudientucntt
Page 4
1. The Nature of UI Design goupee.vn goupee.com UI design may be significant portion of overall development effort, e.g. <=50% UI design may be: “mission critical” - UI to a commercial organisation‟s web site “safety critical” – UI to aircraft Engine Instrument System (EIS) Users are unpredictable, designer’s intuition may be incorrect Ideally, UI design involves a team of specialists, e.g. graphic designers interaction / interface designers information architects technical writers marketers test engineers usability engineers software engineers users UI design is inevitably constrained by the I/O devices available I/O now exploits graphical (non-persistent) displays, via keyboards, cursors and pointing devices (mouse, pen, tablet, etc) Major physical constraint is size of area available for UI Interaction must be effective (for users), but to be effective (e.g. simple) often needs to be presented in >1 page/screen fb.com/goupee.vn 4 CuuDuongThanCong.com https://fb.com/tailieudientucntt
Page 5
2. UI Design Principles goupee.vn goupee.com Principle = a simplifying generalisation Accepted as true Can be used as a basis for reasoning UI Design Principle = guideline fb.com/goupee.vn 5 CuuDuongThanCong.com https://fb.com/tailieudientucntt
Page 6
2.1 Layout… goupee.vn Layout = graphic design goupee.com The realm of graphic designers (and human cognition experts…) The notion of “intuitive flow” is used to minimise unnecessary movement between different areas presented to users, e.g. Left-to-right & top-to-bottom Chronological order Least-to-most specific Most-to-least frequent Vertical Flow “Horizontal” Flow Patient Information Patient Information Patient Name: Patient Name: First Name: First Name: Last Name: Last Name: Address: Address: House No./Name: Street: House No./Name: Town/City: Postcode: Street: … Town/City: Postcode: … fb.com/goupee.vn 6 CuuDuongThanCong.com https://fb.com/tailieudientucntt
Page 7
goupee.vn goupee.com 2.2 Content Awareness (hence human cognition experts…)Macintosh (then Windows) introduced “standardised” layout System Navigation Section Navigation Page Navigation Status Bar fb.com/goupee.vn 7 CuuDuongThanCong.com https://fb.com/tailieudientucntt
Page 8
2.2 continued… goupee.vn [2] Menus should indicate current locationgoupee.com [1] All interfaces should be titled and at least most recent location (ideally a history of recent locations) [3] Sections (or areas) should be marked using lines, colours, headings [4] Input fields should indicate the type of the values that are legal fb.com/goupee.vn 8 CuuDuongThanCong.com https://fb.com/tailieudientucntt
Page 9
2.3 Aesthetics goupee.vn goupee.com Aesthetics in IT emphasises HCI issues, e.g. user-friendly devices and software applications Aesthetically pleasing GUI‟s can improve human productivity Have even been patented, e.g. http://www.freepatentsonline.com/20030107597.html Software (arguably) has aesthetic “dimensions”, likewise information-technology-mediated processes and experiences, e.g. computer games and virtual reality simulations. Digital culture is a distinct aesthetic used to judge the appeal of digital environments e.g. Web Browsers, Web Sites, icons, etc. The notion of cyberspace as an “electronic medium” For practical purposes, in IT systems, aesthetics requires minimalist interfaces All forms and reports have a minimum of white space (or negative space) that is left intentionally blank Whitespace = portion of a page left unmarked: the space between graphics, margins, gutters, columns, lines of type or figures and objects drawn or depicted. Text should have same font and font size Changes in font and size = changes in kind of information presented Avoid italics and underlining Serif fonts for printed reports San-serif fonts for displays and headings Colour used sparingly for a specific purpose fb.com/goupee.vn 9 CuuDuongThanCong.com https://fb.com/tailieudientucntt
Page 10
2.4 User Experience goupee.vn goupee.com Users may be novice or expert But experience changes significantly over time Novice requires ease of learning Expert requires ease of (re)use Menus can be comprehensive or contextual All available operations on a selected object Most frequently used operations on an object WIMPs (Windows, Icons, Menus, Pointing device) embody object oriented notion of Currently selected object (at the user interface) Type of object, including its state, constraining operations that can be applied to those operations which are semantically meaningful given the current state of an object (and possibly the history of previously applied operations) Such interfaces are strongly-typed Type of object = values (or states) that object may take Constraints on application of operations can be expressed formally fb.com/goupee.vn 10 CuuDuongThanCong.com https://fb.com/tailieudientucntt
Page 11
2.5 Consistency goupee.vn goupee.com Consistency enables users to predict what will happen Interaction with one part of system = interaction with other parts (+ new interactions due to elements unique to other parts) Consistency applies on different scales Navigation controls (icons, commands) Terminology (customer or client, not customer and client Across systems, i.e. at the Enterprise Level Application-specific views are achieved via object-orientation Subclassing generic views to create specific views. 2.6 Minimising User Effort Fewest possible mouse clicks or keystrokes to navigate e.g. in max 3 clicks fb.com/goupee.vn 11 CuuDuongThanCong.com https://fb.com/tailieudientucntt
Page 12
3. Interface Design Process goupee.vn goupee.com A five-step iterative process Movement forwards and backwards between steps First, Use Cases and Sequence Diagrams from analysis phase used in user interviews User interviews develop scenarios describing commonly used patterns of actions users perform Secondly, analysts develop windows navigation system defining underlying structure of interface Diagrams show all interfaces (screen, form, report) in system and their interconnections Thirdly, Analysts design interface standards Underlying design elements for interfaces in system Fourthly, Analysts create interface design prototype for each interface E.g. navigation controls (including conversion of essential use cases to actual use cases), input screens, output screens, forms (inlcdung pre-printed paper forms), and reports Fifthly, individual interfaces are evaluated for usability fb.com/goupee.vn 12 CuuDuongThanCong.com https://fb.com/tailieudientucntt
Page 13
3.1 Use Scenario Development goupee.vn goupee.com Use scenario shows steps users perform to Use Scenario: Browsing Shopper accomplish some part of their work One path through and essential use case 1. May search for specific artist OR browse though music category(1) 2. Usually reads basic information for several CD’s AND marketing material for some CD’s. Usually listens to music Use Case Diagram samples AND browses related CD’s(3) Internet Sales System 3. Puts several CD’s in shopping cart Maintain Marketing Information AND continues to browse(5) Vendor PlaceOrder 4. Finally, places the order BUT <<include>> usually wants to examine CD’s in <<include>> Customer Checkout shopping cart and discard some <<extend>> Place CD’s first(7) Instore Hold <<extend>> <<actor>> <<include>> Maintain Bricks and Order Mortar Store Place <<extend>> Create Special Hold New Customer <<extend>> <<actor>> Two or three Use Scenarios Fill Bricks and Mail Order Mortar Store for most common interactions <<actor>> Distribution Main Order distinct from System Maintain CD Checkout both included in Information Place Order use casefb.com/goupee.vn 13 CuuDuongThanCong.com https://fb.com/tailieudientucntt
Page 14
3.2 Interface Structure Design goupee.vn Defines underlying components of interface AND how they collectively provide required functionality goupee.com Described by Window Navigation Diagram (WND) for all screens, forms and reports How they are related to each other How user moves from one to another Non-trivial systems will require several WND‟s Similar to behavioural state machine, i.e. models state changes in user interface States represented by boxes Box corresponds to user interface component e.g. window, form, button, report Transition: =13 states No return Action causing (to main menu) Change of state Transition: Return required (to Menu A) <<sterotype>> = fb.com/goupee.vn 14 Type of interface component CuuDuongThanCong.com https://fb.com/tailieudientucntt
Page 15
3.3 Interface Standards goupee.vn goupee.com Underlying design elements common to individual screens, forms, and reports May be different standards for different parts of system… One for web screens, another for paper reports, another for input forms Each interface may contain some of the elements in a standard Each interface may have additional elements to a standard Standards applied to templates, metaphors, objects, actions and icons Interface Temples abstract define underlying appearance of ALL screens, forms and reports Position of navigation areas, status area, form & report area Colour scheme Position and order for common interface actions (e.g. File Edit View in that order, left to right) Interface Metaphors defines how interface works, e.g. shopping cart = “real world” counterpart Enables user to predict what features interface provides Interface Objects Object names often appropriate, e.g. shopping cart is CALLED “Shopping Cart” in user interface teplate Sometimes object names inappropriate, e.g. searching for CD‟s <> searching for tapes Interface Actions: template defines navigation and command language style, & names of commonly used actions e.g. menu, grammar, “buy” vs “purchase” Interface Icons: Represent state of objects and actions e.g. icon to represent “deleted” fb.com/goupee.vn 15 CuuDuongThanCong.com https://fb.com/tailieudientucntt
Page 16
3.4 Interface Design Prototyping goupee.vn goupee.com Prototype = working model e.g. executable simulation of screen, form or report Can be storyboard, HTML, (implementation) language HTML = HyperText Markup Language for creating web pages Describes structure of text in a document by denoting certain text as headings, paragraphs, lists, etc and supplements text with interactive forms, embedded images, and other objects. Storyboard: shows structure of screens and actions that move user between screens HTML: Series of web pages in HTML Users interact with pages directly Pages linked, e.g. via buttons, hypertext No underlying functionality (e.g. “Delete” does not delete) (Implementation) Language: Build using same language or software tool used to develop system E.g. Visual basic used to create screen and links Show exactly how final system will appear and function No underlying functionality (e.g. “Insert” does not insert) fb.com/goupee.vn 16 CuuDuongThanCong.com https://fb.com/tailieudientucntt
Page 17
3.5 Interface Validation (or “evaluation”) goupee.vn goupee.com Improvements to interface design before system completion Heuristic Evaluates interface with reference to heuristics or design principles Evaluated against checklist Walkthrough Storyboard, HTML or (implementation) language prototype evaluated by users of system as presented by system developers Interactive HTML or (implementation) language prototype enables users to follow Use Scenarios in real Use Cases (OR navigate themselves through system) Formal Usability Testing (Implementation) language OR final system enables users to accomplish tasks in Use Scenarios unaided whilst monitored, e.g. by video camera for every action in an interaction fb.com/goupee.vn 17 CuuDuongThanCong.com https://fb.com/tailieudientucntt
Page 18
4. Navigation Design goupee.vn goupee.com Navigation = movement between screens, reports forms AND feedback to users by system Controls embody user‟s model of (logical) structure of each interaction Use state of (named) objects at interface to constrains operations to those which are semantically meaningful given current state of object (and possibly history of previously applied operations) e.g. [1] “grey out” menu options that are inappropriate for given state, [2] dynamically configure menu to include appropriate options only Hierarchically structure larger menu‟s e.g. by cascading submenu‟s to right of parent menu‟s Confirm irreversible state changes before such changes are implemented e.g. via dialogue Allow “undo” of operations Make object selection and action on that selection ordered by grammar[2] order (command) = cut Object-action OR action-object WIMPs interface is action-order, e.g. select text, cut [1] action = select text fb.com/goupee.vn 18 CuuDuongThanCong.com https://fb.com/tailieudientucntt
Page 19
4.1 Kinds of Navigation Control goupee.vn goupee.com Three approaches to defining user commands: Languages Command language Have (formal) syntax rules (or grammar) Enable arbitrarily complex commands to be constructed by user Even large (and complex) languages can be made easier to use, e.g. via syntax sensitive and (ideally) syntax directed editors (a form of structure editor) Natural language Use inbuilt simplifying grammar or dictionary of key words to interpret user natural language string e.g. Microsoft‟s Office Assistant Menus Menu options enable user to choose action to be performed (or applied to selected object) Options set should reflect current state of object (possibly history of previously applied operations) Larger menus should be structured as submenu‟s hierarchically, and cascaded to aid user “hot keys” provide use with single keystroke option for commonly used actions fb.com/goupee.vn 19 CuuDuongThanCong.com https://fb.com/tailieudientucntt
Page 20
4.1 continued goupee.vn goupee.com Menus can group options by interface objects OR interface actions Menu Bar Tool Bar with buttons Menu Divide for greyed-out options Drop-Down Menu Greyed-Out option = command fb.com/goupee.vn 20 CuuDuongThanCong.com https://fb.com/tailieudientucntt
Affichage des 20 premières pages. Téléchargez le document pour le voir en entier.
Commentaires (0)
Aucun commentaire pour le moment. Soyez le premier !