Scribd
Upload
988 views11 pages

Envisioning: Requirements Flowcharting Scenarios Wireframing Context-Scenario Map

Next development stage of design cycle

Uploaded by

gelvan
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
988 views11 pages

Envisioning: Requirements Flowcharting Scenarios Wireframing Context-Scenario Map

Next development stage of design cycle

Uploaded by

gelvan
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

Interactivity 1

Envisioning
Requirements Flowcharting Scenarios Wireframing Context-Scenario Map

Requirements
something the design must do or a quality the product must have(1)

after collecting and analyzing the user data, designers need to turn this into requirements - a creative leap

requirements to be prioritized using MoSCoW Rules Must have - fundamental Should have - essential given time Could have - lesser importance Want to have - can be left out for the next round
1. Robertson and Robertson, Mastering the Requirement Process (1999)

Requirements
Requirement Description Rationale
Nature of the Requirement

Priority

Content
What content will be needed in the system to address this requirement?

Function
Describe the mechanism or feature needed to access the content or perform the activity

Why is this requirement ! MoSCoW needed?

The content must be compatible with the students reading level.

Compatibility with the class will ensure integration and support selfesteem and motivation

Must

Reading material from current textbook in use

Delivery of text in smaller chucks; audio reader; visual prompts

Flowcharting

Visualizing the interaction process Analyzing and and describing the interaction process Sequencing of steps in a process (temporal) Plan routes and pathways of user experience

Flowcharting

Symbolic Representations

http://www.jjg.net/ia/visvocab/

Wireframes

Planning the layout of interface elements Documenting screens at various states No visual/type treatment, just the basics Propose the needed interactions

Wireframe + Scenario = Context Scenario Map

Wireframe + Scenario = Context Scenario Map*

SCENARIO

Centre for Contemporary Canadian Art

As a casual viewer, Tom became interested in Canadian art when he visited an art exhibition in Toronto. Since he is new to the topic, he decides to learn more about Canadian art at the CCCA website that the curator recommended.

1
1
user enters site
search by

1
CCCA
Search

search bar

2
CCCA
Search

Title of Artwork
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce

CATEGORIES

CATEGORIES
ABOUT CONTACT SITE INDEX

dui nulla, interdum vel, convallis sit amet, pulvinar quis, augue.

description of artwork

main menu

ABOUT CONTACT SITE INDEX

Donec id nisi quis est eleifend sollicitudin. In consectetur elit...

randomly generated artworks

rolled over image

Drag artwork or artist here to compare

Drag artwork or artist here to compare

comparison bar

Tom arrives at the home page. He is presented with a wall of interesting Canadian artwork that he can browse while dragging the stage.

Tom comes across an image he is interested in and rolls over it to read the description. Wanting to know more, he clicks on the link in the description.
4
CCCA
Search

2
category list search bar
for specific

3
random selection
CCCA
Advanced Search

contextualizer *

display modes

CATEGORIES

Keyword

Display

Artwork Title
Name, Artist

KEYWORD

A little blurb about this significant event and how A little blurb about this significant event and how this is going to work and as you can see more information is revealed here. A little blurb about this significant event and how

ABOUT CONTACT SITE INDEX

creates filters for

artwork information

Date made: 1986 Materials: stone Measurements: 3.25 x 5.25 x 3.5 in./po Collection: Reproduced with the permission of Barnabus Arnasungaaq; photograph courtesy Feheley Fine Arts, Toronto, ON Copyright 1997, 2008. Centre for Contemporary Canadian Art. All rights reserved.

KEYWORD

KEYWORD

drag to

4
search results
displayed as

thumbnails artwork
RELATED ARTISTS & ARTWORK

basic info
Time

Sort by

Theme

Context

Drag artwork or artist here to compare

Drag artwork or artist here to compare

artist bio page

links to

3
artwork page

comparison box

C O M PA R E

C O M PA R E

has

has

has

has

At the artworks page, Tom decided to save the image by dragging it to the comparison bar which expands to allow for the addition. He notices related keywords from its social, political, or cultural context are listed in the contextualizer * with definitions or explanations.
5
CCCA
Search

Tom selects a tag and is brought to a page that displays other artworks that share the same keyword. Seeing two other artworks that appealed to him, he drags them to the comparison bar.

related artist

related artwork

contextualizer* with shared tags

*flowchart added as additional ! information layer


Annmarie Akong Edeline Bernal Joanna Poon //w2009

drag to

drag to

CATEGORIES

KEYWORD

A little blurb about this significant event and how A little blurb about this significant event and how this is going to work and as you can see more information is revealed here. A little blurb about this significant event and how

comparison bar

ABOUT CONTACT SITE INDEX

contextualizer *

1
3

KEYWORD

KEYWORD

artwork

5
comparison box

has

* Contextualizer:

Drag artwork or artist here to compare

C O M PA R E

Tom then clicks compare and sees all three artworks on the same page. He has the option to disable any images to reduce the number shown. He also notices that the contextualizer appears here again, showing the context for all three images, with similarities highlighted.

Tags and information related to selected artworks are linked to other artworks or artists with the same tags. When two or more items are being compared, tags or info shared between the selections are highlighted.

You might also like