Visual Interface Design in HCI. in this presentation i 've collected all information about visual interface designs and how they work and the most important building blocks of Visual Interface design.

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.

7. SHAPE
D0 Don’t

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