Presentation Design - Presentation Design WRET1103 Some key...

Info iconThis preview shows page 1. Sign up to view the full content.

View Full Document Right Arrow Icon
This is the end of the preview. Sign up to access the rest of the document.

Unformatted text preview: Presentation Design WRET1103 Some key visual display principles (Lewis and Rieman, 1994) The `clustering' principle organise screen into visually separate blocks based on logical grouping Aim to give title to each block The `visibility reflects usefulness' principle make frequently used functions obvious, visible and easy to access Hide, shrink infrequently used functions Some key visual display principles (Lewis and Rieman, 1994) The `intelligent consistency' principle Use similar screens for similar functions The `colour as a supplement' principle Don't rely on colour to carry information Use it sparingly to emphasise information provided through other means The `reduced clutter' principle Don't put too much on the screen Norman's Principles of Good Design Visibility. By looking, the user can tell the state of the device and the alternatives for action. A good conceptual model. The designer provides a good conceptual model for the user, with consistency in the presentation of operations and results and coherent, consistent system image. Good mappings. It is possible to determine the relationships between actions and results, between the controls and their effects, and between the system state and what is visible. Feedback. The user receives full and continuous feedback about the results of actions. Norman, Donald. The Design of Everyday Things. Doubleday, 1990. Eight golden rules of user interface design (Schneiderman) Strive for consistency Enable frequent users to use shortcuts. Offer informative feedback. Design dialogs to yield closure. Offer error prevention and simple error handling. Permit easy reversal of actions. Support internal locus of control. Reduce shortterm memory load. Schneiderman, Ben Designing the User Interface 3rd ed Mayhew's "General Principles of User Interface Design" Use simple and natural dialog in user's language Match user's task in natural way. Avoid jargon, and techno speak. Present exactly information users need, not too little or too much. Strive for consistency Sequences, actions, commands, layouts and terminology should be consistent so as to make the interface more predictable. Provide informative feedback Continuously inform user what is happening. It is most important to provide feedback on substantive and infrequent actions. Minimize user's memory load Human mind can recognize better than recall. Provide enough information so that the user can take action without recalling a lot. Mayhew's "General Principles of User Interface Design" Permit easy reversal of actions (undo) To reduce anxiety and encourage experiments. Provide clearly marked exits So that the user won't be trapped on any level of the applications. Provide shortcuts Enable frequent users to perform often used operations quickly. Support internal locus of control Put user in charge, not computer. Handle errors smoothly and positively Make the system robust and provide easy to use recovery measures. Provide useful help and document Users should be able to get sufficient help information when they get confused. Screen design principles (Galitz `93) WHAT information or data is placed on the screen HOW it is structured WHERE it is located on the screen A Well Designed Screen Reflects the needs of its users is developed within the physical constraints imposed by the terminal effectively utilises the capabilities of its software is consistent within itself, within related screen formats and with other screens A Well Designed Screen A well designed screen can: increase human processing speed reduce human errors speed computer processing time increase human productivity A poorly designed screen will reduce all of these. Considerations in Screen Design Human Hardware/Software reflect clarity, meaningfulness, ease of use reflect physical constraints of the terminal, characteristics of the controlling program reflect objectives of the system for which the screen is being designed Application Appearance and Layout Keep the screen uncluttered by: using lots of blank space to achieve simplicity to make important material stand out presenting one major idea or transaction per screen Colour in Screen Design Use colour as a formatting aid to: relate or tie fields into groups differentiate groupings of information associate information that is spatially separated highlight or call attention to important information Use of Graphics Use graphics to: draw attention to essential information communicate & clarify, not to decorate & beautify highlight key facts relieve visual boredom help explain complex relationships Illustrations Regardless of the many types and styles of illustrations they will all have to function within the same basic limitations of the screen, namely resolution, size and colour. Computer display considerations shape of screen size of screen spatial resolution of screen graphic safe areas Resolution of computer screens Typical computer screen 640 x 480 pixels (72 pixels per inch) (5,184 pixels per square inch) Line artwork and typography in typical magazine (1200 dpi) (1,440,000 dots per square inch) (or about 278 times the resolution of a typical computer screen) Graphic safe areas Graphic `safe area' dimensions for layouts designed to print well: Maximum width = 535 pixels Maximum height = 295 pixels Graphic `safe area' dimensions for layouts designed to maximise screen usage: Maximum width = 595 pixels Maximum height = 295 pixels Role of text in multimedia Page titles Labels for images Captions Information in bulk text Operation/navigation instructions Hypertext Linked or Hyperlinked Systems links between text elements and bookmarks within a document or between documents. Consists of two elements: 1. Text highlighted by some means to differentiate its appearance from other text. 2. Link information correlated to the highlighted text and the destination. Typographic Design Basic principle Good typography helps the reader distinguish among different things. Different letters are easy to tell apart, words are clearly separated from one another, the reader can easily move from one line to the next without getting lost or distracted, it's easy to see where paragraphs and sections begin and end, and so on. Rules that stem from the principle Singlecharacter (typeface) rules: The rules in this first category apply to individual letters and symbols--typically to the typeface you choose. Wholeline and paragraph rules: The rules in this category apply to lines and paragraphs of text. Singlecharacter (typeface) rules Mix upper and lower case rather than using ALL UPPERCASE LETTERS. The uppercase letters are more uniform in height, and thus harder to distinguish. Use a proportionallyspaced typeface rather than a monospace typeface, in which every letter from "i" to "w" has the same width. Singlecharacter (typeface) rules Use typefaces in which the widths of the strokes that make up the letters varies rather than one in which every line in every letter has a uniform thickness. Variable stroke width also helps distinguish between letters. Singlecharacter (typeface) rules Use typefaces with serifs (the tiny strokeending flourishes at the tops and bottoms of most letters) rather than typefaces without serifs ("sansserif" faces). Serifs help the reader distinguish between letters. Wholeline and paragraph rules Limit lines to 1012 words (about 75 characters) in length; with longer lines, the reader's eye can wander when moving from the end of one line to the beginning of the next. Wholeline and paragraph rules Choose unjustified ("raggedright") margins over justified ("flushright") margins; this keeps the spaces between words uniform and helps the reader distinguish one line from the next. Justifying margins requires adding additional space between words on a line. Some spaces between words on a single line may be one character wide while other interword spaces on the same line may be two characters wide; this produces widely varying gaps between words on a single line. Wholeline and paragraph rules Typography for the Web Good typography is just as important on a web page as it is in any other medium. Home pages Graphic or text menus, submenus "Other related sites", catalogues Bibliographies, indexes, appendices FAQ pages Site indexes Table of contents Sans serif fonts are generally the more readable on screen. Keep the number of typefaces to a minimum. Watch spacing between characters, lines, paragraphs and the proximity of text to other objects such as images. Be careful when placing text over graphics, especially with colour, font and size. Guidelines for presenting text on screen Use reverse type for emphasis; avoid similar colours or bleeding will occur. Use black text on a white (or very light grey) background for best contrast and legibility Use contrasting color and text weight effectively. E.g. : Good White on Black Black on White Black on Yellow Bad Black on Gray Blue on Black Purple on Red Avoid textured backgrounds Guidelines for presenting text on screen Vary type size, style, boldness, etc to match Vary type size, style, boldness, etc to match the message you're sending. Use novel approaches to get the user's attention but avoid novel text formats for informational text because it can be difficult to read. Avoid condensed, light, extended or decorative typefaces Set text blocks to a minimum of 9 points Increase line spacing to improve reader speed Use a line length of 40 75 characters for optimum legibility Avoid all uppercase headlines As A General Rule: put no more than 6 7 lines of text and one graphic per screen break text up into short paragraphs of 3 4 sentences avoid displaying information until it is needed where a lot of data must be shown on one screen, start with a simple display and progressively add more layers of information Icon Design Icons are symbols, pictures or images representing a concept (e.g. object/s, action/s) Whether to use text or graphics depends on: It is generally recommended when developing new icons to provide a text equivalent The users visually vs. verbally oriented,language skills, disabilities, etc. The tasks drawing tasks vs. word tasks The concept under consideration Icon design Types according to form Resemblance icons depict concept via same/analogous object/action Exemplar icons depict typical example of a general class of object/action Symbolic icons convey the underlying concept at higher level of abstraction Arbitrary icons have no resemblance to concept Icon design Type according to function Object icons e.g. document, folder, printer Pointer icons e.g. selection, text, graphics Control icons e.g. buttons, check boxes Tool icons e.g. fill, erase, graphs Status indicator icons e.g. hourglass, watch Design according to overall good Human Factors principles, e.g. visibility, feedback, logical grouping, uniqueness within set Consider providing additional information to represent status, e.g. tones relating to document size Consider how combinations of icons can generate new objects/actions, e.g. dragging a file to an application Icon design Some general recommendations Basic Rules in Designing Icon Consistent Clarity Simple Familiarity The Benefits of Using Icons 1. 2. 3. 4. `A picture can represent a thousand words'. Icon can replace a written language. Functions represented by a good and universal designed icon can be identified and understood at a glance a good and universal designed are easier to remember Icons Disadvantages 1. 2. 3. Cannot represent writtten language for complex situations. New icons must be thoroughly research, designed, tested and introduced to users. Difficult to design good icons Menu design Menus are an extremely versatile dialogue style with many advantages for the user There are many design issues, for example: choice of menu structure how to arrange menu items how to present menu items labeling of menus and menu items Types of menu structure (Shneiderman, 1998) Depth vs. breadth in menu design Depth = number of levels Generally recommended no more than 3 levels More levels = navigation problems Generally recommended no more than 8 items/level More items = scanning problems Breadth = number of items per level Breadth is generally favoured over depth, as long as clutter and/or clarity don't become serious issues How to arrange items within a menu Group according to: List according to frequency List according to importance/criticality List in numerical/alphabetical/chronological order functions (e.g. in File menus opening files, saving files, printing files, existing files, exiting) categories (e.g. in Shopping menu vegetables, fruit, meat etc.) Colour Usage Cool colours suitable for backgrounds. Warm colours suitable for attracting users attentions Brightness of the colours should be exploited to indicate the importance of the represented information. Storyboarding Can range from informal to sophisticated Evolved from movie industry Used to get early reaction from users Strengths Inexpensive & flexible Informal & interactive Early feedback on user interface (GUI model) Easy to create/modify Get past blank page syndrome 3 basic types of storyboards Passive Sketches, pictures, powerpoints, postit notes, etc. Walks user thru a scenario with system Animated or automated Not necessarily executable Essentially a `dumb' prototype Active 3 basic types of storyboards Interactive Realistic simulation of system May be executable prototype May contain throwaway code Can require user interaction with a GUI Can be quite sophisticated Storyboards focus on details of humancomputer interface Who are the players Users What happens to them Screen flows How it happens Events & transitions that trigger screen flows Tools Whiteboard drawings PostIt notes Screen mockup in Spreadsheet app (Excel) Presentation app (Powerpoint) Drawing app (Visio) Graphics/animation tool (PhotoShop) Benefits Storyboards help walk user through the proposed application visually To discover missing requirements quick discover problems To facilitate developers with screen layout As a communication tool reference medium to the developer Interaction details can be visually portrayed. Acknowledgements: Typographic Design, David.G. Kay http://www.ics.uci.edu/~kay/typography.pdf User Interface Design Issues by G.E. Burnett, 2004, http://www.cs.nott.ac.uk/~geb/UID L7.pdf ...
View Full Document

Ask a homework question - tutors are online