Visual Interface Design HCI presentation By Uzair Ahmad
- 2. • Submitted By: Uzair Ahmad • Submitter To: Sir Muhammad Javed Hussain Khan • Program: BSCS • Semester: 7th • Topic: Visual Interface Design(About Face 3 By Alan Cooper)
- 3. WHAT IS VISUAL INTERFACE DESIGN? • Visual Interface design centers on how a product looks. • Colors, fonts, images, illustrations, icons, and other graphics are some of the building blocks of visual design. • Good visual design enhances a user's experience, keeping its users engaged while they navigate and use the product • It also builds a positive and consistent brand image and communicates the right information to its users.
- 4. THE BUILDING BLOCKS OF VISUAL INTERFACE DESIGN • Shape • Size • Value • Hue • Orientation • Texture • Position
- 5. SHAPE • Shape is the primary way we recognize what an object is. • Is it round, square, or amoeba-like. • We tend to recognize objects by their outlines • However, distinguishing among different shapes • Takes a higher level of attention than distinguishing some other properties such as color or size.
- 6. SHAPE • The weakness of shape as a factor in object recognition is apparent to anyone • who’s glanced at Apple’s OS X dock and mistakenly selected iTunes instead of iDVD • or iWeb instead of iPhoto • However, distinguishing among different shapes • While these icons have different shapes, they are of similar size, color, and texture.
- 8. SIZE • How big or small is it in relation to other items on the screen? • Larger items draw our attention more, particularly when they’re much larger than similar things around them. • Size is also an ordered and quantitative variable • which means that people automatically sequence objects in terms of their size
- 9. SIZE • if we have four sizes of text. • We assume relative importance increases with size. • And that bold type is more important than regular • This makes size a useful property in conveying information. • Sufficient difference in size is also enough to draw our attention quickly.
- 10. VALUE • How light or dark is it? • The idea of lightness or darkness is meaningful primarily in context of the value of the background. • On a dark background, dark type is faint, but on a light background, dark type is pronounced. • if a photo is too dark or light, for example, you can no longer perceive what’s in it.
- 11. VALUE • Contrasts in value are something people perceive quickly and easily. • So value can be a good tool for drawing attention to elements that need to stand out. • Value is also an ordered variable. • For example, lower-value (darker) colors on a map are easy to interpret • As deeper water or denser population.
- 12. HUE • Hue literally means color. • Hue refers to the origin of the colors we can see. • In some professions, hue has specific meaning we can take advantage of it. • For example, an accountant sees red as negative and black as positive
- 13. HUE • In China, red is the color of good luck. • But in traffic signals, red means “stop”. • And sometimes even “danger”. • To create an effective visual system that allows users to identify similarities. • And differences between elements, you should use a limited number of hues.
- 14. HUE
- 15. ORIENTATION • This is a useful variable to employ when you have directional information to convey (up or down, backward or forward. • Orientation can be difficult to perceive with some shapes or at small sizes . • so it’s best used as a secondary communication vector. • For example, if you want to show the stock market is going down. • You might want to use a downward-pointing arrow.
- 16. TEXTURE • Texture is like the skin of the body. • In short, texture are the properties that the surface of bodies have. • Of course, elements on a screen don’t have real texture, but they can have the appearance of it. • when we see a textured rubber area on a device, we assume that’s where we’re meant to grab it. • You might want to use a downward-pointing arrow.
- 17. TEXTURE • Ridges or bumps on a user-interface (UI) element generally indicate. • that it’s draggable, and a bevel or drop-shadow on a button makes it seem more clickable. • Of course, elements on a screen don’t have real texture, but they can have the appearance of it. • when we see a textured rubber area on a device, we assume that’s where we’re meant to grab it. • You might want to use a downward-pointing arrow.
- 18. POSITION • Where is it relative to other elements. • Like size, position is both an ordered. • and a quantitative variable, which means it’s useful for conveying information about hierarchy. • We can leverage the reading order of a screen to locate elements sequentially. • With the most important or first used in the top and left.
- 19. POSITION • Position can also be used to create relationships between. • objects on the screen and objects in the physical world.
- 20. PRINCIPLES OF VISUAL INTERFACE DESIGN • Use visual properties to group elements and create a clear hierarchy • Provide visual structure and flow at each level of organization. • Use cohesive, consistent, and contextually appropriate imagery. • Integrate style and function comprehensively and purposefully. • Avoid visual noise and clutter.
- 21. USE VISUAL PROPERTIES TO GROUP ELEMENTS AND CREATE A CLEAR HIERARCHY • It’s usually a good idea to distinguish different logical sets of controls or data by grouping them. • Them by using visual properties such as color and dimensional rendering. • For example, in Windows XP, all buttons are raised with rounded corners and text fields are rectangular. • slightly inset, and have a white background and blue border. • Avoid visual noise and clutter.
- 22. USE VISUAL PROPERTIES TO GROUP ELEMENTS AND CREATE A CLEAR HIERARCHY
- 23. PROVIDE VISUAL STRUCTURE AND FLOW AT EACH LEVEL OF ORGANIZATION • It’s useful to think of user interfaces as being composed of visual and behavioral elements. • which are used in groups. • Be grouped into screens, views, or pages.. • There may be several such levels of structure in an application. • We Maintain a clear visual structure so that a user can easily navigate from one part of interface to another.
- 24. ALIGNMENT AND THE GRID • Alignment of visual elements is one of the key way. • That designers can help users experience a product in an organized, systematic way. • Grouped elements should be aligned both horizontally and vertically. • In general, every element on the screen should be aligned with as many other elements as possible.
- 25. ALIGNMENT AND THE GRID • Align labels. • Labels for controls stacked vertically should be aligned with each other. • Align within a set of controls. • A related group of check boxes, radio buttons, or text fields should be aligned according to a regular grid. • Align across control groups and panes. • Groups of controls and other screen elements should all follow the same grid wherever possible
- 26. ALIGNMENT AND THE GRID EXAMPLE
- 27. USE COHESIVE, CONSISTENT, AND CONTEXTUALLY APPROPRIATE IMAGERY • Use of icons and other illustrative elements can help users understand an interface • or if poorly executed, can irritate, confuse, or insult. • It is important that designers understand both what the program needs to communicate to users. • And how users think about what must be communicated • Align across control groups and panes
- 28. USE COHESIVE, CONSISTENT, AND CONTEXTUALLY APPROPRIATE IMAGERY • Cultural issues are also important • Designers should be aware of different meanings for colors in different cultures. • Red is not a warning color in China. • For gestures thumbs up is a terrible insult in Turkey • Make sure you understand the visual language of your users’ domains and environments before forging ahead.
- 29. INTEGRATE STYLE AND FUNCTION COMPREHENSIVELY AND PURPOSEFULLY • When designers choose to apply stylistic elements to an interface • it must be from a global perspective. • Every aspect of the interface must be considered from a stylistic point of view, not simply as individual controls or other visual elements. • Most successful companies make a significant investment in managing their identity and building brand equity • In its most basic sense, brand value is the sum of all the interactions people have with a given company.
- 30. AVOID VISUAL NOISE AND CLUTTER • Visual noise within an interface is caused by. • superfluous visual elements that distract from the primary objective of directly communicating software function and behavior. • Imagine trying to hold a conversation in a crowded and loud restaurant. • It can become impossible to communicate if the atmosphere is too noisy. • The same is true for user interfaces.
- 31. KEEP IT SIMPLE • In general, interfaces should use simple. • Typography should not vary widely in an interface. • Typically one or two typefaces, specified to display at just a few sizes, will be sufficient. • Unnecessary variation is the enemy of a usable design. • If two typefaces are nearly the same size, adjust them to be the same size.
- 32. KEEP IT SIMPLE • Every visual element and every difference in color, size, or other visual property should be there for a reason. • If you don’t know a good reason why it’s there, get rid of it. • Typically one or two typefaces, specified to display at just a few sizes, will be sufficient. • Unnecessary variation is the enemy of a usable design. • If two typefaces are nearly the same size, adjust them to be the same size.
- 33. THANKS