Chapters 13, 14, & 15 Daniel Schomburg Rollie Ostrander Neil S. Harmon
Chapter 13 Choosing interaction elements: software components Neil S. Harmon Daniel Schomberg Rollie Ostrander
Summary Five components: • Text • Color • Images • Moving Images • Sound
Text - Advantages of Text: • Text takes up little memory. (1 MB = 200 page book) • Text is easily manipulable. • Text is less ambiguous (relatively).
Text - Readability Factors in determining readability: • Typeface – “Familiar” or “Unfamiliar” • Type Size – • Letter spacing – T h i s Too big h a r d vs. t o Too small r e a d
Text - Readability Factors in determining readability: • Line spacing – If you have small type sizes, then you can Increase legibility by increasing the leading. This text is at the default leading. vs. If you have small type sizes, then you can Increase legibility by increasing the leading. This text has extra leading.
Text - Readability Factors in determining readability: • • • Line length – Maximum line length should not exceed 60 characters. Justifcation – Left-justified recommended for consistent reading. Line endings – Avoid short lines, but if it is unavoidable, divide text with grammatical boundaries.
Color - Purpose Uses of color: • To draw attention. • To show status. • To make the information clearer. • To make the display more attractive.
Color - Usage Intrinsic brightness – Overall brightness relative to the amounts of dark and light colors. Colors should have good contrast. Readable Good: Bad: Unreadable If strong color contrast is used, one should be darker. Readable Good: Bad: Unreadable
Color - Considerations Keep in mind: • • 8% of males are colorblind. Colors vary depending on system. Flickering – The tendency of contrasting colors to cause the reader to lose focus. I. E. This text is very difficult to read. Cultural considerations.
Color - Considerations Other things: • • • Number of colors shouldn’t exceed six. Monochrome design can be extremely effective. Reinforcing colors should be used to draw attention.
Images - Types Three main types of images: • Pictures – photographs, drawings, cartoons, etc. • Diagrams – Venn diagrams, relationship diagrams • Graphs and Charts – pie chart, bar chart, histograms
Images - Purpose Motivate, attract, persuade, amuse – Most importantly used in advertising and marketing. Communicate spatial information – Ideal for number crunching reports. Pie graphs, etc. Overcome language barriers – Instruction in user manuals, typically. “Plane videos” Support interaction – Uses of metaphors and icons.
Images - Example
Moving Images Purposes: • To illustrate movement • To provide dynamic feedback • To attract attention • To show that the computer is operating
Sounds – Types There are three types of sound: • Ambient sounds and sound effects • Music • Speech
Sounds – Purpose Sound effects provide three uses: • Reinforce the visual component of the UI. • Confirm the successful completion of an operation • Attract attention
Sounds – Purpose Music can be good or bad: • Tends to alter moods. • Classical music might enhance relaxation. • Warning! Repetition is irritating!
Sounds – Purpose Speech, according to Michaelis and Wiggins is most effective when… • The message is simple. • The message is short. • The message will not be referred to later.
Sounds – Purpose Problems with sound include: • Concatenation – adding pieces of human speech together to create sentences, which tends to be jerky and stilted. • Intrusion – information spoken aloud for all to hear becomes privacy issue. I. E. Supermarket self-checkout.
Conclusion Five types of media: • Text • Color • Images • Moving Images • Sound
Conclusion Questions?
Chapter 14 Moving from Choosing Components into Design Areas
Introduction: This Chapter covers the following: • Combining hardware devices and software components into a complete UI. • Discusses Principles of good layouts • Defines what a Design Area is
Combining Interaction devices with Software Components • The goal is to combine software and interaction devices, which is usually some sort of hardware, into a seamless whole. • Presenting too many competing components at once is a poor design decision because this can cause confusion. • Simplicity is crucial to achieve a good design. Simplistic designs prevent users from feeling overwhelmed and are not annoying either.
Combining Interaction devices with Software Components • Sometimes Simplicity is not attainable because the task or the type of user demands a more complicated interface. The book gives the example of a helicopter pilot. • Conflicting requirements will be encountered when designing a UI. For example, users plan out action sequences to perform tasks, a shorter action sequence is more desirable. Often times UI’s include many buttons or icons to allow for shorter action sequences. Over utilizing this principle can lead to cluttered complex designs.
Combining Interaction devices with Software Components When UI’s are not simple, users can often be over whelmed.
Principles of Good Layout The principles of good layouts are as follows: • Create Natural Groupings –Icons or menus which are of similar nature should be grouped together. • Separate the Currently Active Components –The UI should make an attempt to show which component is currently active. –In Windows the currently active window has a different color border than an in active window.
Principles of Good Layout • Emphasized Important Components –Important components should be easy to find. –Do not over use emphasis. –Animation, size, position or color schemes can be used to show emphasis. • Use White Space Effectively –White space is the areas of the screen that do not contain components. –These areas are important for creating space and distinctions between components.
Principles of Good Layout • Make the Controls Visible –A control with good visibility has an obvious function. –This implies the controls, which are displayed on a screen, should suggest what the control's function is. • Balance Aesthetics and Usability –It is important to have attractive UIs for marketability; however, usability should be sacrificed for attractiveness. –Sometimes Aesthetics and Usability can clash.
What Is a Design Area? Design Area is set of design issues and guidelines. • Each Design Area attempts to handles the issues that arise when design a specific type of interface. • The book gives the example of the following three design areas: • GUIs graphical user interfaces • Web Pages • Embedded systems like Handheld Devices
What Is a Design Area? • Often times design areas overlap and their separations are not precise. • Technological convergence occurs when aspects of different design areas start to merge and overlap. For example, webpage’s often employ the concept of the GUI widget. • New design areas develop with time. • Ubiquitous Computing is a good example of this.
Design Components and Design Areas • The tasks followed when Designing an UI are: 1. Identify the design area, and keep in my the specific design principles, guidelines and issues for identified design area 2. Consider the conceptual design that you created in response to your requirementsgathering activities 3. Combine the design components taking into account the demands of the design area and what you want to happen in the UI to meet the requirements.
Design Components and Design Areas • Each design area has specific or unique characteristics and we should be aware of these. • Often times the unique characteristics of the design area may affect a UI. For example when GUI and Websites are created, considerations for people with visual impairments should consider.
Design Components and Design Areas UI designs develop quickly and in a fluid manner. The current tools for constructing UIs will eventually be replaced by better ones; however, the issues and principles stay fairly consistent, and therefore this is what we should focus on when learning about UIs.
Additional Example: TI 83+ Calculator How can this calculator be Improved through: The psychological principles of UI Design The use of input and output The use of color The use of images Its simplicity Its layout
Additional Topics: Ubiquitous Computing Mark Weiser claims to be the father of ubiquitous computing. If you are interested his webpage is http: //www. ubiq. com/hypertext/weiser/Ubi. Home. html “Ubiquitous computing’s highest ideal is to make a computer so imbedded, so fitting, so natural, that we use it without even thinking about it. ” It can be thought of as the opposite of virtual reality and http: //en. wikipedia. org/wiki/Ubiquitous_computing for the wiki, which contains a lot of respectable links.
Conclusion Questions?
Chapter 15 Case study on design: Tokairo part 2
Driver’s Worksheet • Original form – User enters text and numbers once – Main element in separate table surrounded by a border and white space and one trip is spread across sheet adding to confusion • New form – User writes a number in the box at top and then bubbling in the same number in the same column (looks a lot like a lottery ticket or scantron) – Entering load number redundancy has been removed – Use of pale red to emphasize groupings and the use of some white space
The Kiosk • Kiosk built from scratch – drivers’ reengineered • Kiosk contains: – Scanner – Touchscreen – Printer • Kiosk operation: – – PIN Scan worksheet (kiosk checks for errors) Worksheet returns Receipt printed just below
How Tokairo Designed the UI • Simplicity and Flexibility – User base not exactly computer literate – Build it to be flexible, so easily localized across country/world • Simplicity and Familiarity – Use single interfaces: finger, screen (touchscreen) – Touchscreen kiosk very similar to ATMs
How Tokairo Designed the UI (cont) • Prototype: Communicating Ideas – Prototype a screen (low-fidelity), showing clients what you plan to develop – Prototypes used as discussion tools • Designing the Screens – Split single layered window into 3 frames • Foreground/background color • Color of Buttons • Font size and style
How Tokairo Designed the UI (cont) • Designing the Worksheet – Similar to UK Lottery ticket – Easy to use and familiar (Simplicity and Familiar) • Prototype: Facilitating Evaluation – Feedback from screen prototype – Drivers filled a prototype worksheet, gave developers information to test from
How Tokairo Designed the UI (cont) • Two Surprises – Forms being rejected with too many errors and drivers not wanting to refill the whole form again – Global messaging very rarely used
Summary • Characteristics of process – Largely informal, which had an advantage of allowing changes to requirements and design – Most decision made in meeting with all Stakeholders – Decisions for UI were not written down, but were formulized in prototypes – Relationship between Tokairo and Tankfreight
Conclusion Questions?
Скачать презентацию Chapters 13 14 15 Daniel Schomburg Rollie
894730b02fad4b3cabbd4ff0b9abcf9d.ppt