DESIGN PROCESS:
NAVIGATION AND INTERFACE DESIGN
Course Code:CIS121
Module Leader: Md. Rafiqul Huq Rafi Lecturer (CIS),
Daffodil International University (DIU)
LEARNING OUTCOMES
• B Y THE END OF THIS TOPIC , STUDENTS WILL BE ABLE TO :
• E XPLAIN THE IMPORTANCE OF SITE STRUCTURE AND NAVIGATION IN THE CONTEXT OF USER - CENTRED WEB DESIGN
• U SE A SITE STRUCTURE DIAGRAM AND WIREFRAME MODELS TO SPECIFY THE DESIGN OF A WEBSITE
• E XPLAIN THE MAJOR PRINCIPLES OF INTERFACE DESIGN FOR WEBSITES
WEB DESIGN PROCESS
► T
HIS TOPIC EXPLORES THE DESIGN STAGE OF THE PROCESS:
• D EFINING GOALS
• L EARNING ABOUT USERS
• D EFINING CONTENT AND FUNCTIONALITY
• D ESIGNING SITE STRUCTURE
• D ESIGNING NAVIGATION
• I NTERFACE DESIGN
• W RITING (X)HTML AND CSS
Research
Design
Implementation
Tes tin g
DEFINING CONTENT AND FUNCTIONALITY
• A
T THE END OF THE RESEARCH STAGE THE OUTCOME WAS A COLLECTION OF CONTENT AND FUNCTIONALITY REQUIREMENTS.
Awards
Customer testimonials Contact us Galleries exhibiting the
Jewellery Exotic woods used
to make the jewellery Gemstones used to
make the jewellery
Metals used to make the jewellery
Jim’s biography Betty’s biography
Bangles
Earrings Necklaces
Brooches
Pendants
Shopping Basket
The jewellery making
process
HIERARCHIES
• W
EBSITES ARE ORGANISED HIERARCHICALLY• U SERS ARE FAMILIAR WITH HIERARCHIES
• D
ESIGNING THE SITE STRUCTURE INVOLVES:
• O RGANISING THE CONTENT CHUNKS INTO SECTIONS AND SUB - SECTIONS
• L ABELLING THE SECTIONS
JB Contemporary Jewellery
Bangles Earrings
Necklaces
Brooches Pendants
Collection Shop
Shopping Basket
Customer Testimonial
s
Contact Us
Galleries Jim’s Biography
Betty’s Biography
Company History About JB Contemporary
Jewellery
Exotic Woods Gemstones
Metals
The Jewellery Making Process
Materials
And Process
DESIGNING SITE STRUCTURE
• D ESIGNING S ITE S TRUCTURE IS AN IMPORTANT STAGE
•
D EFINES NAVIGATION
• C AN ’ T RELY ON SEARCH FACILITIES
•
N OT ALL USERS WILL USE A SEARCH FACILITY
•
S EARCHES DON ’ T ALWAYS RETURN USEFUL RESULTS
•
O NLY USEFUL FOR LARGE SITES
• D ESIGNING SITE STRUCTURE IS OFTEN CHALLENGING
•
I NFORMATION DOESN ’ T ALWAYS FIT NEATLY INTO CLEARLY SEPARATE CATEGORIES
•
S ECTION HEADINGS CAN EASILY BE CONFUSING
SITE STRUCTURE DESIGN PRINCIPLES
• T HERE ARE A NUMBER OF PRINCIPLES THAT CAN BE USED WHEN DESIGNING SITE STRUCTURE
•
E
ACH CONTENT ITEM SHOULD BELONG IN ITS SECTION•
S
ECTION LABELS SHOULD CLEARLY DESCRIBE THE CONTENT•
S
ECTION LABELS WITH THE WORD‘
AND’
SHOULD BE AVOIDED•
L
ABELS SHOULD BE AS SHORT AS POSSIBLE•
T
HE MOST IMPORTANT CONTENT SHOULD BE AT THE TOP LEVEL OF THE HIERARCHY• Q UESTION - L OOK BACK AT SLIDE 7 AND THE SITE STRUCTURE DIAGRAM FOR JB CONTEMPORARY
J EWELLERY . H OW COULD YOU RE - DESIGN THE
PROPOSED SITE STRUCTURE TO IMPROVE IT ?
Customer Testimonials
Galleries
Exotic Woods Gemstones
Metals
Jim’s Biography
Betty’s Biography
Bangles Earrings Necklaces Brooches
The Jewellery Making Process Company
History
Materials About Us
JB Contemporary Jewellery
Shopping Basket Contact
Us
The Jewellery Making Process
Pendants
• P
OSSIBLE IMPROVEMENTS• R ENAMING SECTIONS MORE CONCISELY
• M OVING IMPORTANT CONTENT UP THE
HIERARCHY
• S IMPLIFYING SECTIONS
INVOLVING USERS – CARD SORTING
• C ARD SORTING IS A TECHNIQUE TO INVOLVE USERS IN DESIGNING SITE STRUCTURE
•
E ACH CONTENT CHUNK IS WRITTEN ON AN INDEX CARD OR POST - IT NOTE
•
U SERS ARE ASKED TO GROUP RELATED ITEMS AND GIVE EACH GROUP A NAME
•
A RECORD IS MADE OF THE CARD SORT
•
D IFFERENT CARD SORTS BY DIFFERENT USERS ARE COMPARED
• C ARD SORTS CAN ALSO BE ‘ CLOSED ’
•
U SERS SORT CARDS INTO PRE - DEFINED SECTIONS
DESIGNING NAVIGATION
• N AVIGATION DEFINES HOW USERS FIND THEIR WAY AROUND A WEBSITE
•
D EVELOPED FROM SITE STRUCTURE
• N AVIGATION PLAYS AN IMPORTANT ROLE IN
•
T ELLING THE USER WHAT THEY CAN DO ON A SITE
•
T ELLING THE USER WHERE THEY ARE IN THE SITE STRUCTURE
• C OMMONLY USED NAVIGATION SYSTEMS
•
P ERSISTENT NAVIGATION
•
L OCAL NAVIGATION
•
B READCRUMBS
PERSISTENT NAVIGATION - 1
http://www.ikea.com
PERSISTENT NAVIGATION - 2
• T HE NAVIGATION ELEMENTS THAT APPEAR ON EVERY PAGE OF A SITE
•
I
MPLEMENTED AS A NAVIGATION BAR•
L
ARGE SITES WILL HAVE SECTIONS AND SUB-
SECTIONS•
E
ASY ACCESS TO SITE CONTENT AND FUNCTIONS• M AJOR SECTIONS
• S EARCH
• L INK HOME
• F UNCTIONS E . G . SHOPPING BASKET
•
P
ROVIDES REASSURANCE TO USERS• S HOULD BE IDENTICAL ON EVERY PAGE OF THE
SITE
LOCAL NAVIGATION - 1
http://www.hm.com
LOCAL NAVIGATION - 2
• L
OCAL NAVIGATION SHOW LINKS TO PAGES AT THE CURRENT LEVEL OF THE HIERARCHY• U SUALLY IMPLEMENTED AS A SEPARATE NAVIGATION BAR
• ‘Y OU ARE HERE ’ INDICATORS SHOW USER ’ S CURRENT POSITION
• V ISUALLY HIGHLIGHTING THE CURRENT PAGE ON
THE NAVIGATION BAR
BREADCRUMB NAVIGATION - 1
http://www.officedepot.com
BREADCRUMB NAVIGATION - 2
• B
READCRUMB NAVIGATION SHOWS LOCATION IN THE HIERARCHY• E ASY TO RE - TRACE STEPS
• U
SEFUL IN LARGE SITES WITH DEEP HIERARCHIES• N OT A REPLACEMENT FOR PERSISTENT NAVIGATION
• M
ANY SITES USE VISUAL CONVENTIONS• A NGLE BRACKETS TO SEPARATE ITEMS , SMALL
TEXT , THE CURRENT PAGE IS EMPHASISED
WIREFRAME MODELS - 1
JB
Contemporary
Jewellery About Us Jewellery
Shopping Basket Materials Recognition
Bangles
Bangles Earrings
Necklaces
Brooches Bangle Design 1 Bangle Design 2 Bangle Design 3
Bangle Design 4 Bangle Design 5 Bangle Design 6
WIREFRAME MODELS - 2
• W IREFRAME MODELS SHOW PAGE LEVEL DETAIL
•
N AVIGATION OPTIONS
•
I NDICATE OTHER PAGE LEVEL CONTENT - PAGE TITLE , SITE IDENTITY
•
C AN SHOW LINEAR PROCESSES E . G . SHOPPING CART
•
N OT ABOUT VISUAL DESIGN
• P RODUCED FOR MAJOR PAGES IN THE SITE
•
N OT EVERY PAGE
• C AN BE USED FOR TESTING WITH USERS
•
R UN THROUGH SAMPLE TASKS
INTERFACE DESIGN
► I
NVOLVES TAKING WIREFRAME MODELS AND PRODUCING PAGE DESIGNS►D ECIDING ON LAYOUT , COLOURS , FONTS ETC .
►W IREFRAME MODELS TELL US THE PAGE CONTENTS
► A
LL IMPORTANT PAGE ELEMENTS SHOULD BE IMMEDIATELY VISIBLE TO USERS►T HE USER SHOULDN ’ T HAVE TO SCROLL TO SEE
PAGE ELEMENTS
USER SCAN WEB PAGES
• U
SERS SCAN WEB PAGES• T ASK FOCUSSED
• D ON ’ T READ PAGES
• U
SERS‘
SATISFICE’
• S ELECT FIRST NAVIGATION OPTION THAT SEEMS TO FIT
• A
USER-
CENTRED PAGE DESIGN MAKES IT EASY FOR USERS TO SCAN PAGES AND MAKE CHOICESVISUAL HIERARCHIES
• T
HE VISUAL HIERARCHY TELLS THE USER ABOUT THE MEANING OF PAGE ELEMENTS• C
LEAR VISUAL HIERARCHY MAKES THE PAGE EASY TO SCAN• G ROUPING RELATED ITEMS
• C REATING C ONTRAST
• A LIGNMENT
• C ONSISTENCY
GROUPING RELATED ITEMS - 1
http://www.play.com
GROUPING RELATED ITEMS - 2
► R
ELATED ITEMS SHOULD BE GROUPED VISUALLY►T HROUGH ASPECTS SUCH AS POSITION ,
BORDERS AND COLOUR
►B REAK A PAGE UP INTO DISTINCT AREAS
►C AN BE DIFFICULT WITH LIMITED SCREEN SPACE
► E
XAMPLES►N AVIGATION OPTIONS GROUPED IN NAVIGATION BARS
►S ITE FUNCTIONS VISUALLY SEPARATE FROM
SECTIONS
CONTRAST - 1
http://www.play.com
CONTRAST - 2
http://www.proppa.com/
CONTRAST - 3
• I
MPORTANT PAGE ITEMS SHOULD STAND OUT VISUALLY• U SE OF SIZE , ALIGNMENT , COLOUR AND TYPEFACE
• E
XAMPLES• ‘Y OU ARE HERE ’ INDICATORS ON NAVIGATION BARS
• P AGE NAME AND COMPANY LOGO BEING THE MOST VISUALLY PROMINENT PAGE ELEMENTS
• N AVIGATION OPTIONS BRIGHTLY COLOURED AND LOOK LIKE BUTTONS
• I
F TOO MANY ELEMENTS ARE EMPHASISED PAGES CAN BECOME‘
NOISY’
ALIGNMENT - 1
http://www.atomized.tv/
ALIGNMENT - 2
http://www.atomized.tv/
ALIGNMENT - 3
• P AGE ELEMENTS SHOULD BE VISUALLY CONNECTED TO EACH OTHER
•
P ROVIDE INVISIBLE LINES TO DIRECT THE EYES
•
E ASIER TO SCAN THE PAGE
• M ANY SITES USE GRIDS TO LAYOUT PAGE ELEMENTS
•
V ERTICAL AND HORIZONTAL GUIDELINES USED TO PLACE ELEMENTS ON A PAGE
• CSS GRID FRAMEWORKS
•
HTTP :// WWW . BLUEPRINTCSS . ORG /
•
