Transcript Selected techniques from the Creative Design Process

Selected techniques from the
Creative Design Process
• Vision statement
• Requirements workshop, other facilitated
workshops
• Creative Design Brief
• Navigation Map
• Creative Design Comps
• Web Design Elements
• Initial Web UI Prototype, UI Guidelines,
• Full Web UI Prototpe
• Full Navigation Map
Vision Statement
• Successful Web applications start with a
compelling vision statement.
• Web solutions involve a variety of stakeholders:
business executives, marketing, customer
support, development, graphic design, etc.,
whose communication and cooperation is critical
to success.
• The vision statement must be developed
personally by the stakeholders, ensuring
agreement on the project‘s goals form the
outset.
– Discuss potential difficulties.
Vision Statement
• Purposes of the vision statement:
– It achieves agreement on what problems
need to be solved
– It defines the boundaries of the system
– It describes the most important features and
qualities of the system.
Requirements Workshop
• Once the vision is (largely) agreed upon, facilitated
workshops are held with the stakeholders to further
identify the users and services the system should
provide along with the essential qualities and constraints.
• Use of brainstorming
• Gathering of requirements on post-it cards to identify
actors, use-cases, and supplementary features. Use of
other moderation techniques to ensure participation and
expression of stakeholders‘ views.
• Use of UML use-case diagrams and other semi-formal
notations (compare WISDM) to capture meanings of
stakeholders.
Creative Design Brief
• The Creative Design Brief identifies the initial
user interface guidelines. It defines:
–
–
–
–
–
–
–
The mood of the site
How users are expected to access the site
The browsers the users will be using
Whether the site will use frames
Any color limitations/orientations the site will have
If applicable, a graphics standards guide
What sort of „bells and whistles“ are wanted (e.g.
mouse-overs, animation, news feeds, multimedia, …)
Navigation Map
• The navigation map („site map“) is a view that
represents the web application in the form of a
tree diagram.
• Each level of the diagram shows the number of
clicks necessery to to get to that (logical) page.
(if possible, # ≤ 3)
• The navigation map evolves from the use-case
model, it accompanies the use-case storyboard.
• For a larger system, one navigation map is
constructed per actor (or even per use-case).
Creative Design Comps
• Creative Design comps present to the stakeholders a
number of visual options .
• Comps consist of mock-ups of what the site might look
like. They are non-functional, flat pictures framed with
browser window graphics.
• They help to postpone the investment for the more costly
HTML prototypes.
• To create Comps, we take an important use-case and
develop many alternative designs. Three most promising
options are selected to be presented to the stakeholders.
Typically it takes three iteration before a consensus on
the final design is reached.
Web Design Elements
• Web Design Elements are discrete images that are
assembled to build the web pages.
• Consistency of the user interface across a web site is
essential to usability, since the site should provide a
consistent user experience.
• The project must consistently use a set of standard
graphhical components across the site.
• These components should be developed early in the
project, along with guidelines for their usage.
• Reusing (a tight set of) high quality standard graphical
elements reduces development cost and increases
quality.
• The Creative Design Comps serve as input for the web
design elements being created in parallel with the initial
UI prototype.
Initial Web UI Prototype
• The initial UI prototype is based on the
Use-Case storyboard, the Creative Design
Comps and uses the Web Design
Elements identified before.
• It typically supports only portions of the
system, based on the most important and
representative use cases.
UI Guidelines
• Detailed guidelines for the user interface are
developed after the initial user interface
prototype is complete.
• This system specific style-guide specifies e.g.:
–
–
–
–
How and when web design elements shall be used
Color schemes, fonts
Cascading style-sheets or XSL specification
Details on how navigational elements shall function
and be positioned.
Full Web UI Prototype;
Full Navigation Map
• Based on initial UI prototype
• Covers all use-cases
• Demonstrates full navigation between screens and
visual elements
• Real or dummy data is used depending on the
development of the functionality and content of the
application
• Goal: Come to agreement with the stakeholders on the
scope and specific nature of each of the user
interfaces.
• The full navigation map includes all known
pages/screens identified in the web UI prototype.
Overview of combining Creative
Design techniques with the UP
Navigation Map
• Insert an example for a full web site
navigation map. Use either Fig., 2 from
http://www.rational.com/products/whitepap
ers/101057.jsp or better something
adapted from that figure.