Transcript Designing for designers? - Information Management and Systems

IMS5401
Web-based Systems Development
Topic 3: Development for the web
3(b) Content design and layout
www.monash.edu.au
1. The context for content design
and layout
Technology
constraints
Functional
requirements
Design
Process
Design
aesthetics
Design
Outcomes
Design
standards
www.monash.edu.au
2
Form and function: web design versus
‘traditional’ systems design
•
•
•
•
•
•
Design for data-oriented transaction-based
systems
Page-oriented vs data-oriented systems
Multimedia and design
For what applications does form
(appearance/aesthetics) become important?
For what applications is form the main
function?
Whose ideas of form? (“beauty is in the eye of
the beholder”?)
www.monash.edu.au
3
Design and Technology
•
•
•
•
What can technology do?
How far should we stretch technology to
achieve design ends? (the Sydney Opera
House/Federation Square problem)
At what price? (to users and usage; to support
staff)
Designing for changing technology
www.monash.edu.au
4
Key design decisions
•
At a site level:
•
•
•
•
At a page level:
•
•
•
Conceptual site design
Site design features
Standard site design elements (appearance/function)
Conceptual page design
Page layout and structure (appearance/function)
At a page element level:
•
•
Choice of media
Element design (appearance/function)
www.monash.edu.au
5
Graphic design at a site level
•
•
Aim to achieve coherence and consistency in
design for all pages across an entire site
Site concept
•
•
Site design features
•
•
What is the purpose of the site and how does each
page help to achieve it?
Page structure and layout
Site design standard elements
•
Colours, icons, fonts, etc across the site
www.monash.edu.au
6
Graphic design at a page level
•
•
Aim to achieve coherence and consistency
within each page
Page concept (purpose)
•
•
Page layout
•
•
What is the function of the page and how does each
element help to achieve it?
Positioning of page content, navigation, titles, etc
Page elements
•
Fonts, colours, icons, etc
www.monash.edu.au
7
Graphic design at a page element level
•
•
Aim to provide optimal representation of
information content (explicit and implicit)
Element purpose
•
•
Element representation
•
•
What is the function of this page element within the
context of the rest of the page?
Choice of media for representation (text, symbols,
graphic, photo, animation, video, sound)
Element form
•
Size, and features (vary according to method of
representation)
www.monash.edu.au
8
Design and standards
•
Different types of standards
•
•
•
•
•
•
Web standards
Organisational standards
Site standards
What standards are appropriate?
What do users expect?
What do you do with a ‘bad’ design standard?
www.monash.edu.au
9
2. Web site content creation: Issues
•
•
•
•
•
Content for web systems may be needed to
meet a range of information functions and
purposes
Requirements for web content may not be
easy to identify or specify
Tools and technologies for content creation
may not be well-known or easy to use
New standards and commodities are
evolving for different forms of content
IS professional has to become familiar with
a new set of system content capabilities
www.monash.edu.au
10
Understanding the user: implications for
content
•
•
•
The audience for a web site may be quite
different to the audience for a traditional IS
Web system developers may find it much
harder to find out what their audience needs
and expects
Understanding the way an audience uses the
web may be crucial to the success of system
design
www.monash.edu.au
11
Technology issues for web page users
•
Page download times
•
•
Monitor characteristics
•
•
Screen size; resolution; colour; user quality
requirements and expectations
Browser capabilities
•
•
File sizes; transmission speeds; user expectations
and satisfaction
Browser; version; plug-in needs; user understanding
and competence
How do you know what technology to design
your content for?
www.monash.edu.au
12
Using different types of content
•
How important is the form of representation of
content to the audience? For example:
•
•
•
Will you read a web site with long scrolling text?
Will you look at a web site without colour and
graphics?
How important is the quality of representation of
content to the audience? For example:
•
•
Will you look at a web site with ugly colour and
graphics?
How long will you wait for a graphics-oriented site to
download?
www.monash.edu.au
13
User expectations for ‘standard’ content
items
•
•
User/audience expectations for ‘standard’
content items (compare with your
expectations for book, newspaper, etc)?
Examples:
•
•
•
•
•
‘About the company’; logos
Search and Help; Contact us
etc
How do these standard items and formats
vary according to the web application?
Universal standards for all applications?
Contentious issue within web design
www.monash.edu.au
14
How do people ‘read’ web site content?
•
•
•
•
•
•
Attention span
Willingness to go elsewhere
Scanning, not reading; difficulties with reading
Looking for relevance - purpose not pleasure
Reluctance to scroll and search (?)
Desire to print/keep
www.monash.edu.au
15
What does this mean for web content?
•
•
•
•
‘Brochureware’ doen’t work!
Importance of content style as well as
substance- structure, titles, headings, language
(newspaper comparison for text; TV
comparison for pictures)
Importance of getting it right
Will this change with time?
www.monash.edu.au
16
Text-based content
•
•
•
•
Writing for the web is different …
… and we are still learning how to do it
Needs specialised writing and text organisation
skills
Still the dominant medium and likely to remain
so (despite limited sex appeal)
Techniques are still evolving (compare with
newspaper writing)
www.monash.edu.au
17
Guidelines for text-based content
•
•
Quantity - keep it short (50% reduction
from printed page)
Scannability
•
•
•
•
Structure
•
•
•
•
Headings and titles
Lists and points
Highlighting and links
Chunks and hypertext
paragraphing
Style - using an inverted pyramid
Language - keep it plain and simple
www.monash.edu.au
18
Graphic content
•
•
•
•
A picture is worth a thousand words …
but sometimes not on the web! Beware
download problems; compromising with
thumbnails - cropping and scaling
Skill requirements for creating good
quality graphics?
User expectations for graphics?
Fitting the graphics to the purpose
www.monash.edu.au
19
Animated content
•
•
•
•
•
Animations look like fun … but serious web
users may not be looking for fun
Inappropriate animations serve to distract as
well as delay
Animations are associated with ads - therefore
users are conditioned to ignore them
Use animations only with extreme care when
absolutely necessary
Animations CAN serve specific purposes requires more research
www.monash.edu.au
20
Video and audio
•
•
•
•
File size problems and technical complexity
make these appropriate only for specialised
purposes
Require skills in production, editing,
enhancement and compression that few people
have
May one day become more feasible, but at
present they are a low-priority problem
Few experiences available to provide guidelines
www.monash.edu.au
21
Commodification of content creation
•
Generic vs custom-made content (clip art,
photo catalogues, existing brochures, etc)
•
•
•
•
Tools for content creation and editing:
•
•
•
•
Suitability for the task?
Suitability for the web (the brochure-ware problem)?
Ease of creation?
HTML/graphics/animation/video/sound/composition
Sophistication and ease of use
Commodification of specialist skills? (Does a good
camera make me into a good photographer?)
Who has the skills, tools and expertise
needed to create the right content?
www.monash.edu.au
22
3. Layout and graphic design:
Issues
•
•
•
How important is graphic design to the web
site? “No design is design” (David Siegel)
What needs graphic design –
site/page/element?
What effect will the graphic design have:
•
•
•
•
On the aesthetics of the site?
On the functionality of the site?
How much can we standardise graphic
design?
Who looks after graphic design issues?
www.monash.edu.au
23
The design space
•
•
The screen
Allocating the screen real estate:
•
•
•
•
•
•
•
The operating system and browser
Identity
Navigation
Content
White space
Advertising
Unused space
www.monash.edu.au
24
Structural elements
•
•
•
•
•
Content boxes
Site identifiers (logos, etc)
Frames
Windows
Menu bars
www.monash.edu.au
25
Navigation elements
•
•
•
•
Navigation controls
Image maps
Embedded links
Search facilities
www.monash.edu.au
26
Structure and layout
•
•
•
•
What goes where on the page?
Where does a user look?
How much can a user see?
Usability studies
www.monash.edu.au
27
Design features and gimmicks
•
•
Technology and fashion drive new ideas and
gimmicks
Examples:
•
•
•
•
•
•
The rotating globe animation
Black backgrounds
Splash pages
Animation
Sound effects
Today’s feature = tomorrow’s gimmick?
www.monash.edu.au
28
Design templates
•
•
•
•
•
Using templates to standardise design
Design templates and user expectations
The death of web design?
Organisational problems with template design
Designing for site adaptability
www.monash.edu.au
29
Guidelines for web graphic design
•
Lots of them!
•
•
•
•
•
•
•
•
Design concept guidelines
Interaction design guidelines
‘Look and feel’ (interface) guidelines
Usability guidelines
Technical guidelines
See Resources
Which guidelines for your site?
Guidelines are useful, but be careful - they are
just guidelines!
www.monash.edu.au
30
4. Information professionals and web
design
•
•
•
•
•
How well does it have to be done (for our
site)?
Do information professionals have anything
to offer to content creation and aesthetic
design?
Do we have the knowledge and skills
required?
Do we understand the design and creative
processes?
Are there other people who can do it
significantly better?
www.monash.edu.au
31
Understanding your audience(s)
•
•
•
•
•
Designing for yourself?
Designing for designers?
Designing for a specified audience?
Designing for the world?
Understanding your audience(s) and their
special needs - disability, etc
www.monash.edu.au
32
Design issues
•
•
•
•
•
•
The functional specification vs the creative
brief
Which is more important to the overall purpose
of the site and the characteristics of the
audience?
Defining and specifying design concepts and
design aesthetics? Creativity and design
“Managed” design processes
From content to usage patterns
User profiles, scenarios and storyboarding
www.monash.edu.au
33
Relevant knowledge and skills
•
•
•
•
•
•
Understanding the site purpose
Understanding the audience and their
needs
Understanding the technology and its
capabilities and limitations
Knowing what works on the web
Design skills - creativity, aesthetic sense,
etc
Design techniques - knowing the tricks
of the trade
www.monash.edu.au
34
Some roles for information
professionals
•
•
•
•
•
Knowing what matters in your design form/function/technology
Understanding the audience(s) and the
client’s needs
Managing the design trade-offs
Doing the design?
Evaluating the design and its
effectiveness
www.monash.edu.au
35
Implications for information
professionals
•
•
•
Understanding the role and relative
importance of content and layout design
for different web applications
Broadening our skills and methods for
understanding user/audience needs to
apply to web usage (focus groups,
market research, etc)
Understanding the specialist skills
needed in content creation and design
www.monash.edu.au
36