concepts of interface and interaction design

User Interface Design > Describe user interface design > Explain the characteristics of Web interface design > Explain visual interface design and the elements that contribute in making

Concepts of Interface and Interaction Design

Concepts of Interface and Interaction Design

© 2013 Aptech Limited

All rights reserved

No part of this book may be reproduced or copied in any form or by any means — graphic, electronic or mechanical, including photocopying, recording, taping, or storing in information retrieval system or sent

or transferred without the prior written permission of copyright owner Aptech Limited

All trademarks acknowledged

Preface

Preface

This book introduces the user to the fundamentals and principles of user, Web, and visual interface design The ARENA Design team has designed this course keeping in mind that motivation coupled with relevant training and methodology can bring out the best The team will be glad to receive your feedback, suggestions, and recommendations for improvement of the book

ARENA Design Team

This page has been intentionally left blank.

Defining GOO DeSIQN 22 ::ccsccccenceeececee cee ceceseeeeceaececesaece sacs seanaececaeeceaaaeseaaaeeceaesesesaeeeseaeeeeenaeeeceteesessaeteneneess 7 Components of Web Page De@SIQN 2 ::::::ccesccceseeeeeeeseceeseceeeeaeeeeeaeceescaeeeceaeeeeseaececeeseeaeseeeeneeeeeaeeeeeeeeesseeteaes 8 Grid TH@OSY 2.2.2.2 ccccccececeeceecceteeceececeeecenaeeeceaeeceaaececneeceaaseceaaaeeceaeeseesaeteceaeeseaaeeeseaeeseaceseaaeeseeeeseneeeseieeeeeaeeenes 9 SUITITI[ý - - - 2E 222512222511 15211 155231155 111111 1115211111 TT TT TT TT TH cv và 9 (<4 10 Principles of Web Interface, Web Page Layouts, and UsabilÏfy - - «se rexerkxee 11 [10093 28e8//238i6ii-s- 0P PPnne 11

Concepts of Interface and Interaction Design

User Interface Design

> Describe user interface design

> Explain the characteristics of Web interface design

> Explain visual interface design and the elements that contribute in making the design effective

In earlier times, Web interface design focused on navigation and presentation of information However, in recent years, Web interface design is referred to as an application-focused interface It is a matter of balancing the structure and relationship of menus, content, and other linked documents or graphics It focuses on creating a hierarchy of menus that is natural, well-structured, easy to use, and truthful

Before deciding on the interface design, you should be able to

> Where will it be used - the Web or any other

application?

> Whatarethecharacteristics that should be incorporated

On a macro level, any good interface should have the

Concepts of Interface and Interaction Design

Designs should be clear and include the following elements:

> Words and text

Example: Snapshot of the Podcast homepage that has an icon-

based navigation system across Refer to Figure 1.2

1.2.2 Conciseness

Conciseness is a vital ingredient in designing an interface When

information presented on screen is concise, users do not have to

(©2002-2011 Poasnop LLC Allrights reserved

Example: The label, ‘Search Here ’, and the magnifying glass

icon indicate the purpose of the text box Refer to Figure 1.3 Figure 1.2: Podshop homepage

(Image courtesy: http://podshop.com/)

1.2.3 Familiarity

Interfaces should be designed in such a manner that they

can be naturally and instinctively comprehended and should

consist of elements that are familiar When something is

familiar, you know how it behaves, and you also know what

to expect Identify things that

are familiar to your users and

integrate them into your user

Example: Folder-type tabs are

commonly used to navigate on

Web sites and applications This familiar appearance makes it easy for the user to understand its working Refer to Figure 1.4

Figure 1.4: Example of familiarity

User Interface Design

Example: A progress bar is a good option for

Figure 1.5: Example of responsiveness

1.2.5 Consistency

Consistency allows users to recognize and

comprehend patterns It enables users to apply

this knowledge while working with scenes that

have similar patterns

Example: Refer to Figure 1.6 In the figure, the user

interface, icons, navigation system, background,

speech bubbles, and peapod graphics appear at

interface that meets the users’ requirements can

create the best experience for your

Ve Favorites | 8 coogle

Example: Google is known for its

gradients and pixel thin highlights that

help in making the icons very evident

and focuses on function over form

Refer to Figure 1.7

(Image courtesy: www.google.co.in/)

[iiss] Building Blocks of Visual Interface Design :

Visual interface design is the process of

elements in a meaningful manner They are

primarily used for communication purposes

Name:

The essential elements of visual interface design

» Shape and size: Shape differentiates Figure 1.8: Example of layout and positioning

elements; size indicates importance - bigger

the size, easier the usage, and better interface efficiency Size also helps create contrast Refer to Figures 1.9 and 1.10 In Figure 1.9, the Web site uses a huge headline with contrasting colors to catch the users’ attention Similarly, in Figure 1.10, the ‘Join Now’ button that has a white outline emphasizes on the action

Concepts of Interface and Interaction Design

and also throws light on the icons and accompanying JR

> Color: Colors express meanings and are used to

used in contrast with the background Refer to

Figure 1.11 DIGIUURU IS THE SH0WCASE 0F CREATIVE DIRECT0R CRAIU JAMIESON

> Contrast: Differentiates between the most important

and least important elements of an interface Refer

to Figure 1.11 where emotions are brought out with Figure 1.9: Example of contrasting colors and

> Texture: Creates a realistic effect and throws lighton _—_ (Image courtesy: http://digiguru.co.za/)

the aesthetic qualities Refer to

Figure 1.12 where reddish hues

of the wooden texture are used to

merge with the photograph in the

background It gives a sense of

warm and welcoming feeling to the

site

> Directattention: Inadditionto color,

size, and other factors, animations

colors and contrast help gather attention

(Image courtesy: http://www.storenvy.com/)

> Icons: Makes the interface visually appealing

Figure 1.12: Example of texture

(Image courtesy: http:/Jamasonbisson.com/

User Interface Design

In this session, User Interface Design, you learned that:

> User interface design is the process of creating design based on the users experience and interaction

> The factors that contribute in making a good Web page design are:

> The essential elements of visual interface design include:

This page has been intentionally left blank.

Web Page Design

> Explain the importance of a good Web site design

> Explain the components that contribute in creating a good Web site design

> Explain the grid theory

A good design is subjective and depends on various factors

2.1.1 Perspectives of Good Design

Design is about communication Usability and aesthetics are the

two perspectives of any design Refer to Figure 2.1

2.1.2 Aspects of a Good Design

A Web site should be self-contained and work cohesively, so that

users are:

> Pleased by the design and drawn to the content

> Able to navigate easily and intuitively

> Able to recognize each page as belonging to the site

mu Users are pleased by the design and drawn to the

Figure 2.1: Perspectives of design

design should act as a link between the interface

elements, search fields, and outgoing links should

be less prominent so that users focus on relevant Figure 2.2: Image depicting a combination of aes-

look when they need to move to other content Refer to Figure 2.3

Aptech Limited

Concepts of Interface and Interaction Design

m Users recognize each page as belonging to the site

A common theme across all pages amidst the various content and layout helps in holding the design together Refer to Figure 2.3, where, in addition to intuitive navigation, a common theme has been used across all the

width

of the page

information for copyright, legal, and contact, and other links to the main sections

side of the page

Web Page Design

2.3.1 The Golden Ratio - Overview

Grids refer to a network of X and Y pixels They are used for the placement and alignment of visual objects on the Web page, which in turn brings visual structure and balance

to the design Grids also provide an organized methodology

for planning systematic layouts

The Grid theory (also known as the Golden Ratio or the

Divine Proportion) dates back to the era of Pythagoras,

who alternatively refers to this theory as the Golden Ratio

Pythagoras and his followers defined numbers as ratios than

single units According to this theory, a line can be cut by

dividing its length by 1.62

This theory is also useful while designing Web pages When

used in design, it is observed that compositions divided by

proportionate lines have an aesthetic appeal The Golden

Ratio when applied to posters, layouts, and brochures Figure 2.5: Example of the Rule of Thirds provide logical guidelines that are attractive and have a

unique appeal

(Image courtesy: http://demandware.com/)

2.3.2 The Rule of Thirds

The Rule of thirds is a simplified version of the Golden Ratio In the Golden Ratio, a line is bisected into two sections; whereas, in the Rule of Thirds, a line is bisected into thirds Refer to Figure 2.5 for an example of the Rule

of Thirds

In this session, Web Page Design, you learned that:

> Design is about communication and revolves around the two aspects - usability and aesthetics

> For adesign to be effective, it should be pleasing, should have navigational elements that can be accessed with ease, and should have an interface that appears familiar

> Design components play a vital role in designing and deciding the vital options for the Web site of the company

> Grids are a network of X and Y pixels They are used for the placement and alignment of visual elements

on the screen The Rule of thirds is a simplified version of the Grid theory

> In the Grid theory, a line is bisected into two sections; whereas, in the Rule of Thirds, it is bisected into thirds

Concepts of Interface and Interaction Design

Ei Exercise

1 Efficiency and functionality are the two elements that contribute an aesthetic value to the design

2 Acommon theme across pages

3 The Grid theory is alternatively referred to as the

4 The Golden Ratio is a simplified version of the Rule of Thirds

Principles of Web Interface, Web Page Layouts, and Usability

> Explain the importance of design principles while designing a Web site

Differentiate between fixed and liquid width layouts

List the pros of cons of fixed and liquid widths

Describe the layouts used for Web page designing

the demographics of the users and their intention behind accessing the Web site

of usability states that the Web page should be obvious and self-explanatory

navigation makes the design effective

be sorted in a clear and organized manner

be free of unnecessary visual elements that will distract attention from the key content and navigation Visual information should focus on and communicate relevant information

better you manage to provide users with a sense of visual hierarchy, the easier your content will be to perceive.”

White spaces reduce clutter and help in segregating content into easily

Concepts of Interface and Interaction Design

the three fundamental principles involved in the use of the so-called ‘visual language’, which in other words is the content users see on screen.”

Key elements:

navigability

> Economize: Simplicity, clarity, distinctiveness, and emphasis

> Communicate: Maintain balance in legibility, readability, typography, symbolism, multiple views, color, and texture

schemes, and such other elements Information should be available with ease

Key elements:

> Placement of the permanent navigation link should be apart from the content

> Use of colors, tones, and shapes to differentiate navigation

> Emphasizing the navigational elements

> Clarity in text

not detached from the main menu pages of the Web site

confidence, and prove the designer’s credibility Elements like the header and footer together make a familiar starting point for Web interface designs Adopting these conventions while designing Web pages help adapt users

Table 3.1: Principles of Web interface

3.2.1 Fixed and Liquid Widths - Overview

Web pages are designed either in fixed width layout or liquid width layout

a Fixed width layout

> The width is fixed and is set with a specific numeric value

> These layouts allow direct control over the appearance of the page

> These layouts allow designers to make minute adjustments to attain consistency

Refer to Figures 3.1 and 3.2 As depicted in the figures, the width of the Web page remains unchanged even when the size of the Web browser is reduced

Principles of Web Interface, Web Page Layouts, and Usability

as Liquid width layout

>

>

>

It depends on the width of the viewer’s browser

These layouts are best suited for Web sites with a

The width is flexible and stretches to occupy the width of the entire browser

lot of information that has to be portrayed in very little space It helps in maintaining consistency in size and page widths

Refer to Figures 3.3 and 3.4 As depicted in the figures,

size of the browser

ee ee ee eee eee anes

‘Amazon.com Camera, Photo & Video: Digital cameras, Digital SLAs, and lenses from Canon, Nikon, Sony & other leading brands, camcorders, shoot

Camera Deals Store eo

Big Deals on Cameras, Camcorders, and more »s:sssow i

HotidayDeats ondotat ta Check out Camera, Photo & Video Free Memory Card and HORI Cable from nerosscs vn Soert Power For aimed tine, purchase a

Browse Our Camera & Photo Lightning Deals 2 qualifying Canon Powershot

card and mini-HDMI cable at no additional charge when you buy from Amazon.com

> Leam more digital camera with HO video

great

pricas far holiday gifting

Like us on Facebook fy a att Soy pa Digtal Upto $160 Gt on Seect Sony Lenses SLR and Get

Black Friday Week Deals

Browse Camera, Photo & Video Tổ CỔ ni

the width of the Web page changes depending on the

RedEnvelope Official fe - Anniversary, Birthday, & Personalized Gifts - Mozilla Firefox I=ll3l

Fie Edt View History Bookmarks Tools Help

Amazon.com Camera, Photo & Video: Digital cameras, Digital SLRs, and lenses from Canon, N

File Edt View History Bookmarks Tools Help

\@! RedEnvelope Official Site - Anniversary,

Pontaasiooe | Canoorett | Provigo | Aaoktsorks | Dene

“|

ot; Oat on Ct mui

creck aut

Browse Our Camera & Photo Lightning Deals

a’ ‘eich 122 eens) ‘ura cunning son; pt Cit SL ana Gxt Up too omen Sl Coming Soon!

Deel tants: 12:46:46

FT to

Pe LTS

mm Electronics vases Black Friday Week Deals

Camera, Photo & Video

Figure 3.4: Liquid width layout with the browser

size changed (Image courtesy: http://www.amazon.com/)