The Notecard Test

I have begun designing my website. Yes, the ACTUAL design. However, it may not be in a format most of you are expecting. In fact, my method does not require the use of a computer. Based on advice given from an Instructional Design teacher, from the IU Education Department, I have decided to utilize 3X5 notecards as my initial design facilitator. How does this work, you ask?

The process:

1) Write the header for each heading/tab you plan to create for your site
I will be using the following headings: Home, Portfolio, About Me, and Contact

2) Include the navigation options from each heading
Be sure that each heading has an option to go "Home," and any other obvious navigation options

3) Have a couple of people attempt to navigate through your "site"
Should there be a need for a new heading, add another notecard

4) Continue this process until you feel confident that your website is "user-friendly" and navigable

So far I have had five people attempt to navigate my site. There have been a few corrections needed, such as: clearly defining subheadings, making additional options from each page clear, and indicating the type of information that will be found on each page. I plan to test the notecards on five more people before moving on to phase two of the test.

Phase two will require me to draw a mock up of each page on the notecards. This will allow my testers to see what the interface will look like, which will demonstrate how visual navigation will occur. Many of my survey results will come into play with this phase, in terms of: placement, graphics, balance and composition, etc.

This notecard process is the first of many tests I plan on using to help uncover the ease and usability of my website. I will keep you posted!

Where To Begin My Design

Where do you begin when attempting to teach yourself web-design? I recommend interviewing and surveying people for any project you begin: films/animations, games, websites, other interactive interfaces. Though it may seem obvious, interviewing and surveying current website visitors is the crucial element in the pre-production phase of a website. Let us think for a moment, who will be visiting your site? People you interview and other Internet users. Take advantage of this fact and utilize the information gained as the foundation for your design. Thanks to my interviewees, I have a growing list of websites waiting to be researched. I am also gaining knowledge in what audiences find appealing and annoying in web design. The following lists are also continuing to grow (NOTE: due to a large number of interviewees, a few of the listed items listed may be considered both positive and negative):

Likes (what works)

Links located at top and/or bottom
Links to other websites
Be sure to open new sites in a different tab
Tabs on left
Easy navigation
Placement of information
Mouse changes to finger when rolling over a link
Good graphics
Pictures, photos, other graphics
Thumbnails
Do NOT open in new windows
Video
Separate pop-up window(s)
Being in control of what you click
Soft colors
Flash-based
Tells narrative/story rather than information
Sound affects/music
ex) With “Sound Off” button
Make button easy to locate
Condense information so easy to read
Depth
Consistency
Well organized
Balanced shapes
Innovation
Less is more (Keep It Simple Stupid = KISS)
Links within text
Fades in and out depending on where mouse is clicking
Change color of links after clicking
Good mix of text and graphics


Dislikes (what does not work)

Scrolling
Too much information on one page
Long loading
Unclear navigation
No good way to get back to homepage
Bright colors
Too much white
Too much of one color
Small text, font sizes, etc.
Sans-serif
Search features never work = useless
Introductions/videos
Unless for artistic site
Option to skip
Not being able to get everywhere from “Home Page”
Advertisements
Music/sound affects
Pop-up windows when rolled-over
Rollovers
Adding to favorites, but the wrong page is added = make favorites for the “Home Page”
Graphic menu that doesn't work
ex) Disappears after you roll-over, so you have to rush to click
Videos/Audio that play immediately
Main window and inside window can scroll
Roll-Overs
Depends on the placement
Menus that say "Coming Soon"

Cracking The Code

I have uncovered a highly useful tool to enhance my learning of (X)HTML coding. Start by printing out a website’s “page source” information; I suggest printing with font size 14 – 16 and double-space the document, as it is easier on the eyes. Grab your “Visual Quickstart Guide” and a pencil. As you read “Quickstart” follow the tutorial examples in the book to mark where the elements take place in your selected webpage’s source code. Pencil will not only allow for you to erase, but also gives your eyes a break from the harsh content of (X)HTML coding.

NOTE: This process may be reversed. In other words, try to pick out an element within the coding. Chances are there is a meaning behind your selection. The back of your “Quickstart Guide” explains what each abbreviation, symbol, and configuration stands for. Many of the explanations may also be found in the corresponding chapter to “Quickstart” (check the Table of Contents in the front of the book).

Welcome To My Blog

Hello Everyone...

My name is Anne Morningstar. I am a graduate student in the Master of Science (MS) program through the department of Telecommunications at Indiana University - Bloomington. I hold my Bachelor of Fine Arts degree (BFA) in Animation from the Milwaukee Institute of Art and Design. Before completing my studies, Spring 2010, I will construct and publish a personal, artistic website in order to exhibit my portfolio to the masses.

This Blog shares my progress and experiences as I journey through the world of Web Design! I have begun teaching myself the ins and outs of what it takes to construct a successful website. However, I believe input from others will only enhance my ability to create an affective site. Therefore I will be posting various information, thoughts, and questions throughout the process in hopes of receiving feedback from you. In addition, I hope my Blog will inspire others to either begin, finish, or continue working on their own website(s).

Please feel free to comment and/or give suggestions and feedback!

Thanks so much, and I look forward to hearing from you.

Happy Monday:)...

Best,

Anne Morningstar

Graduate Student
Telecommunications - Indiana University
2008 - Present