Project Conceptual Design
Your conceptual design report is to be word processed and, where appropriate, carefully and neatly drawn and submitted at the start of class October 21st. This assignment is worth 10% of your grade. The accompanying text material for this assignment comes from Chapters 6, 7, and 8 of your text, Interaction Design.. Although you will not receive your feedback on this deliverable until the following Tuesday, you are expected to move forward with the next assignment. Then, if necessary, you can make any necessary corrections or modifications based on the instructor's feedback.
In this phase, you will be detailing the requirements and creating the general design of your overall project, keeping your user in mind, following your stated specifications and analysis, and striving for the goals of functionality and usability. Keep in mind all aspects of your analysis, and design in accordance with these aspects. Wherever possible, you will incorporate ideas and feedback from your initial user questionaires. What you are creating at this point is a low level prototype of your site along with explanations and justifications for your choices.
You should keep in mind the general principles of consistency between screens and cohesion within screens in order to satisfy your stated criteria and promote ease of learning, ease of use, retention, and satisfaction on the part of your user. Guidelines of good interface design should be followed.
At the completion of this phase, you will have your standard screen design and screen object guidelines planned, your navigational options decided, your navigational flowchart developed and your filenames chosen.
In planning your overall project, you should consider that there should be at least three levels of information: a "home page" for your site (this might be considered to have the "Main Menu" of options), a "secondary" level (accessed from the "Main Menu" and offering yet another range of more detailed options), and a "tertiary" or "definitive" level (that provides the actual information). Depending on your specific application, there may well be more levels in one or more of the areas. In addition to this, you may want the "home page" to be proceeded by a "splash" page that provides no real information nor any options, but gets the user's attention and stimulates their interest in your site. Your site will also have pages that serve other purposes. There are many creative ways in which your various pages can be presented and accessed and a variety of ways in which you can offer alternative navigation within and between them.
The user needs to be able to answer: Where am I? Where can I go? How do I get there? How do I get back to where I started? There are various ways in which these questions can be addressed in a web site: proper screen/page labeling, buttons, icons, graphics, navigational paths, location indications, page turners, table of contents, menu bars, embedded text links, glossaries, site maps, image maps, etc. Although there are some, there are very few situations in the navigation of web pages that "next" and "back" within the page (this is not referring to the browser buttons) are appropriate; in almost all cases, it is preferable to have links specifically labeled as going to specific pages. You are expected to following HCI theory and good usability guidelines in creating your navigational plan.
Submit the following:
Audience:
Further refine your target user population. Indicate if there
are any changes or additional specifications that have come to your attention.
Keep in mind that you will be working with the target population in doing
your usability testing. Specify whether or not audience splitting
will be appropriate for your site. If yes, specify the distinct characteristics
of each group. Address the issue of universal usability in terms
of your site meeting both the technical and the physical capabilities of
your audience.
Content:
Further refine your ideas of the type of content you will include;
this was begun in the mission statement and functional hierarchy in your
Analysis. Address specifically the tasks that your users will accomplish
through the use of your site. State whether or not you will offer
links to external sites and to what extent will you have external linkage.
How will you find the appropriate sites? Where, within your site,
will external links be offered? How will you differentiate the external
linkage from the internal so that users know that they will be leaving
your site? Identify specific aspects of your content that you will
test in the usability testing.
Screens:
Provide a description of your basic metaphor (in what ways you will
"mirror" the reality your site is describing, the way in which you will
"reflect" the task through the interface) and treatment scheme (the "mood"
you will set, the "atmosphere" you will convey) to be used to convey your
overall interaction. In detail, identify your plans for the screen
objects (icons, text, graphics, buttons, frames, etc.) that you will use
to convey the purpose and intent of your site. Explain how your decisions
are in accordance with good design theory. Describe and justify the
balance of the text and graphics that you will incorporate within your
site.
Screen Templates (low level prototypes):
Provide templates (using Word, Power Point, Excel, html or some other
web development tool) of your initial concepts/plans for the layout of
each your various screens. Distinct templates might include: an introductory/welcome
screen, a main menu/initial information screen, a secondary level of menu
choices, one or more content screens, a site map, and one or more facilitation
aids. You may certainly have additional screens conceived as well.
Your plans may elaborate and solidify later as you develop your site; this
is an initial conceptual design. The purpose of templates is to assure
overall consistency between various types of screens. The designer
codes the template and then edits and saves it for each specific instantiation;
it is a basic "pattern" upon which the "ornamentation" is added.
Main Page Navigation:
Referring to the various ways in which your main page may allow access
to your site (topical, metaphor, image map, audience splitting); state
the way in which your main page will initiate access to your site.
Justify this choice in terms of both your site's purpose and content.
Navigation:
Referring to the navigational questions above (Where am I? Where
can I go? How do I get there? How do I get back to where I
started?), identify how you will answer these questions for your user.
Most web sites involve some form of menuing structure, describe the structure
(site architecture) you will employ for your site. Brainstorm and
describe options you will incorporate for an interesting variety of navigation
and navigational choices. Remember that part of the purpose
of this project is to "experiment" with interactivity and try out various
navigational options; be creative and explore various alternative possibilities.
Provide a detailed summary of your plans and decisions; "drawings" may
accompany this, if appropriate. Identify any "standard" navigational
options that will be available on all screens (such as return to main page,
"help", etc.) that will not be unique to a specific screen or set of screens
(these need not be shown on the navigational flowchart requested below).
Identify the aspects of your site's navigation that you will test in the
usability testing.
Navigational Flowchart (low level prototype):
Accomplish a detailed presentation (using whatever tool you find most
appropriate) of the navigational flowchart (or "map of interactivity")
of your program This will resemble your functional hierarchy
but will also show all inter-relationships. This navigational flow should
represent
all
anticipated screens.
Filenames and Hierarchical Relationships:
Provide a numbered outline of the basic hierarchical relationship between
all screens. The items of the outline will be the actual filenames
that will be given to each screen (example shown below). In conjunction
with this numbered outline, indicate the template upon which each of the
files (web pages) will be based.
EXAMPLE: You would, of course, replace the generic filenames and template names shown below with meaningful names. You should use the indentation shown below as it emphasizes the hierarchical relationships
Hierarchical
Template
Level
Filename
to be used
0.
Project_Main.htm
Main_Menu
1.
Variation_One.htm
Secondary_Menu
1.1
Var_One_One.htm Main_Content
1.1.1 Sub_1_1.htm
Sub_Content
1.1.2 Sub_1_2.htm
Sub_Content
1.2
Var_One_Two.htm Main_Content
2.
Variation_Two.htm
Secondary_Menu
Etc.
Etc.
Etc..
5.
Glossary.htm
Supplemental_Content
Etc.