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.
Visual Interface Design HCI presentation By Uzair Ahmad
1.
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.
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.
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
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.
