1. CONCEPT
2. PROPOSAL
3.USER SCENARIO
4.TASK ANALYSIS (SITEMAP)
5. SCHEMATICS
6.COMPS
7. HTML
Tuesday, September 22, 2009
Task ANALYSIS- notes
Task Analysis Notes
Focus on HOW people do things.
Not just what people WANT to do but what they NEED to do.
Keywords/Concepts:
People
Tasks
Technology
Social Issues
-------------
General Task Analysis
http://www.hhs.gov/usability/analyze/analysis.html
Procedural Task Analysis
http://classweb.gmu.edu/ndabbagh/Resources/IDKB/procedural_analysis.htm
--------------------
Follow TA with Scenarios
WHAT people do more than HOW
Representative Tasks
Common/Important Tasks
Complete Tasks
Add:
Observation and Interview
Ethnographies
---------------
Storyboards come out of Scenarios.
Schematics come out of Storyboards.
Summarize your findings.
Develop Information Architecture
Develop Interaction Design (based on Procedural Task Analysis)
Focus on HOW people do things.
Not just what people WANT to do but what they NEED to do.
Keywords/Concepts:
People
Tasks
Technology
Social Issues
-------------
General Task Analysis
http://www.hhs.gov/usability/analyze/analysis.html
Procedural Task Analysis
http://classweb.gmu.edu/ndabbagh/Resources/IDKB/procedural_analysis.htm
--------------------
Follow TA with Scenarios
WHAT people do more than HOW
Representative Tasks
Common/Important Tasks
Complete Tasks
Add:
Observation and Interview
Ethnographies
---------------
Storyboards come out of Scenarios.
Schematics come out of Storyboards.
Summarize your findings.
Develop Information Architecture
Develop Interaction Design (based on Procedural Task Analysis)
Tuesday, September 15, 2009
Information Architecture
Based on Home page www. CHARITYWATER.org
-----------------Navigation Menu
donate
why water
projects
get involed
photos media
events
about us
contact
member area
-----------------Side boxes
merchandise ( a store)
water for school
video feature
Can not model on existing site , just have general idea.
everyting we can connect by lines and make a SITE MAP including little boxes with site elements inside.
(kind of look like a sample map site above)
TOP Level Architecture is one click menu
USERS CHARACTERISTICS
Extremly Important Process : Who your target is and who is not ?
Users categories:
-sponsors
-founders ( institutions)
-donors ( individuals)
-volunteers
-press media journalism
-partners, other organizations involved
PROCESS :
Next, we are giving scenarios to our users, be more specific ( examples : caucasians, demographics, youth, individuals volunteers etc
Task analysis : What need to be done ? ( Clicking, searching etc)
How to analyzing web-sites?
Characteristics of WEBSITE ;] GRASSROOTs-non profit
Information Site
---static or dynamic
---text
---info design (charts, graphs etc)
---visual evidence
---user involvement (uploading, supporting)
---donations
---E-commerce
Specific Examples !
http://www.charitywater.org/ visually better design that cleanwateractions; information design; better organizing and presented information ( Probably the site costs one million dollars :P )
http://cleanwateractions.org/ comparing to one above has better search engine , donations, volunteering, memberships, network of people involved.
http://www.cleanwateratlanta.org : related to grassroots site, not global, more public; most is text, more informative , then interactive
http://www.foe.org/-user involvement , donations, E-commerce part- (a store), sign up and most time for free gifts.
http://ran.org/-hight context of communication, reduced framework, donations, subscriptions, dynamic components.
Information Site
---static or dynamic
---text
---info design (charts, graphs etc)
---visual evidence
---user involvement (uploading, supporting)
---donations
---E-commerce
Specific Examples !
http://www.charitywater.org/ visually better design that cleanwateractions; information design; better organizing and presented information ( Probably the site costs one million dollars :P )
http://cleanwateractions.org/ comparing to one above has better search engine , donations, volunteering, memberships, network of people involved.
http://www.cleanwateratlanta.org : related to grassroots site, not global, more public; most is text, more informative , then interactive
http://www.foe.org/-user involvement , donations, E-commerce part- (a store), sign up and most time for free gifts.
http://ran.org/-hight context of communication, reduced framework, donations, subscriptions, dynamic components.
Homework for WEEK2 PATTERNS
sAMPLE PATTERN DEFINITION/OUTLINE
Pattern type:
Site
Pattern name:
Educational forum
Also known as:
Basic educational forum, advanced educational forum
Description:
An educational forum is a secure area where students, parents, teachers, and mentors can share concerns, present ideas, and codevelop and share activies , that creates a network and provides discussions; provides news and information, helps coordinate offline activities by supplying class schedules, reading lists, exam schedules etc. Examples:
http://www.cfa.harvard.edu/seuforum/
http://educationforum.ipbhost.com/index.php?showforum=126
Patterns which it plays a part of:
to be added later
Patterns which make up an academic forum : search box, calendar, e-mail subscriptions, contacts, registration, login and user control panel, latest content listing, paged navigation, comments , Class Time/Location Table, Syllabus Schedule Table , online course material, examinations, projects etc
Comments:
Basic educational forums need to support all of the routine and ordinary tasks that students, teachers, alumni , and parents face.
Advanced educational forums need to look even further, seeking new ways of creating a sustainable and inclusive community of learning and scholarship. Educational Forums are typically non commercial and subsume a variety of sections or topics. They may also make use of a blog or wiki. Tags syllabus, class schedule, academic, course site, exercise, exhibits, experiment, communication, teacher, student
SAMPLE PATTERN DEFINITION/OUTLINE
Pattern type:
Site
Pattern name:
Mobile Blog
Also known as:
Cell Blog, Phone Blog , Moblog
Description:
A mobile blog is a type of blog that is written and submitted via a cellular telephone, internet-connected PDA or other connected portable device in most cases. The advantage of a mobile blog is that it gives the writer a chance to record his or her thoughts immediately, instead of waiting until there is access to a computer when things can be forgotten. As cell phones, and especially smart phones, have gotten easier to use, this type of phone blogging has become more popular. The mobile blog is based on the same principle as the short message service SMS, only expanded a little bit to include longer pieces, and additional media, such as photos. The blogs may be readable on other phones or may be available, in some cases, for review on computers. Examples:
http://googlemobile.blogspot.com/
http://www.mobilephoneblog.org/
Patterns which it plays a part of:
blog
Patterns which make up a mobile blog : registration, plugins, video, music , photos boxes ; e-mail/phone numbers subscriptions, reviews opinions
Comments: It should be noted that many mobile phones may not support traditional online blogging software programs. Therefore, a specialized program may be necessary.
Tags cell, blog, post, comment, smart phone, SMS, MMS
SAMPLE PATTERN DEFINITION/OUTLINE
Pattern type:
Navigation Tool
Style:
Browse
Pattern name:
Sidebar
Also known as:
Description: A sidebar is a form of auxiliary menu which can be found at the edge of a web page or application, with many operating systems also using sidebars as a form of menu for desktop navigation. Sidebars can contain a wide variety of information, and they are often designed to be configurable by the user so that he or she can keep commonly used tools and information in an easily accessible site. Sidebars may be located to the left or the right of the main application, depending on the taste of the user and the language he or she works in.
Examples: every web-site has it ;]
Patterns which it plays a part of:
to be added later
Patterns which make up icons, text,
Comments: Sidebar navigation can be easier than going through the drop down menus, saving time for the user by allowing him or her to access tools with one click.
Tags Help, Menu, Search, Gadgets.
SAMPLE PATTERN DEFINITION/OUTLINE
Pattern type: Site
Pattern name:
GuestBook
Also known as: website book, website guest book, guestlist
Description: A website guestbook is an area on a website that allows visitors to leave their names to indicate they have been to the site. In most cases, a website guestbook also allows visitors to post their contact information and leave comments. A website guestbook is a helpful addition to any website for a variety of reasons.
Examples :
http://www.a-free-guestbook.com/
http://www.flash-guestbook.com/
Patterns which it plays a part of:
to be added later
Patterns which make up a GuestBook : Contacts, e-mails subscribtions
Comments: One advantage to having a website guestbook is that it provides visitors with a convenient way of communicating with you about any problems they may have encountered while visiting your website. The more positive feedback customers leave on website guestbook, the better potential customers will feel about purchasing from the business. In essence, a website guestbook provides with a means of creating free and unsolicited advertising.
Tags Friend, Forum, Name, Guest, Registration, Comment
SAMPLE PATTERN DEFINITION/OUTLINE
Pattern type: Site or Anti Site
Pattern name:
Para-Site
Also known as: spyware site, misleading site
Description: A para-site is a Web site that mainly depends on a typographical error, domain name mistake, or misspelling to attract people to its Web site. A para-site accomplishes this by choosing a domain name that is very similar to the intended site.
Examples :
www.whitehouse.gov versus www.whitehouse.gov
Patterns which it plays a part of:
to be added later
Patterns which make up a GuestBook : Contacts, e-mails subscribtions
Comments: While some para-sites can be harmless or even a little entertaining, others can be very harmful ( viruses, spyware, pornographic etc)
Tags : the same as in the “real” website
Pattern type: Site
Pattern name:
Photoblog
Also known as: photolog, phlog
Description: A is a form of photo sharing and publishing in the format of a blog. It differs from a blog through the predominant use of and focus on photographs rather than text.
Examples : Photoblog. Com; Flirc
Patterns which it plays a part of:
blog
Patterns which make up a Photoblog : Photos, Comments, Opinions, Search box, Categories , Rankings, Galleries
Comments: Helps preserve memories by date and category ; sharing with people around the world. To work properly needs to have fitted sizes of pictures to be downloaded in short amount of time.
Tags : Pictures, Photography, photobloggers, gallery, art
Pattern type:
Site
Pattern name:
Educational forum
Also known as:
Basic educational forum, advanced educational forum
Description:
An educational forum is a secure area where students, parents, teachers, and mentors can share concerns, present ideas, and codevelop and share activies , that creates a network and provides discussions; provides news and information, helps coordinate offline activities by supplying class schedules, reading lists, exam schedules etc. Examples:
http://www.cfa.harvard.edu/seuforum/
http://educationforum.ipbhost.com/index.php?showforum=126
Patterns which it plays a part of:
to be added later
Patterns which make up an academic forum : search box, calendar, e-mail subscriptions, contacts, registration, login and user control panel, latest content listing, paged navigation, comments , Class Time/Location Table, Syllabus Schedule Table , online course material, examinations, projects etc
Comments:
Basic educational forums need to support all of the routine and ordinary tasks that students, teachers, alumni , and parents face.
Advanced educational forums need to look even further, seeking new ways of creating a sustainable and inclusive community of learning and scholarship. Educational Forums are typically non commercial and subsume a variety of sections or topics. They may also make use of a blog or wiki. Tags syllabus, class schedule, academic, course site, exercise, exhibits, experiment, communication, teacher, student
SAMPLE PATTERN DEFINITION/OUTLINE
Pattern type:
Site
Pattern name:
Mobile Blog
Also known as:
Cell Blog, Phone Blog , Moblog
Description:
A mobile blog is a type of blog that is written and submitted via a cellular telephone, internet-connected PDA or other connected portable device in most cases. The advantage of a mobile blog is that it gives the writer a chance to record his or her thoughts immediately, instead of waiting until there is access to a computer when things can be forgotten. As cell phones, and especially smart phones, have gotten easier to use, this type of phone blogging has become more popular. The mobile blog is based on the same principle as the short message service SMS, only expanded a little bit to include longer pieces, and additional media, such as photos. The blogs may be readable on other phones or may be available, in some cases, for review on computers. Examples:
http://googlemobile.blogspot.com/
http://www.mobilephoneblog.org/
Patterns which it plays a part of:
blog
Patterns which make up a mobile blog : registration, plugins, video, music , photos boxes ; e-mail/phone numbers subscriptions, reviews opinions
Comments: It should be noted that many mobile phones may not support traditional online blogging software programs. Therefore, a specialized program may be necessary.
Tags cell, blog, post, comment, smart phone, SMS, MMS
SAMPLE PATTERN DEFINITION/OUTLINE
Pattern type:
Navigation Tool
Style:
Browse
Pattern name:
Sidebar
Also known as:
Description: A sidebar is a form of auxiliary menu which can be found at the edge of a web page or application, with many operating systems also using sidebars as a form of menu for desktop navigation. Sidebars can contain a wide variety of information, and they are often designed to be configurable by the user so that he or she can keep commonly used tools and information in an easily accessible site. Sidebars may be located to the left or the right of the main application, depending on the taste of the user and the language he or she works in.
Examples: every web-site has it ;]
Patterns which it plays a part of:
to be added later
Patterns which make up icons, text,
Comments: Sidebar navigation can be easier than going through the drop down menus, saving time for the user by allowing him or her to access tools with one click.
Tags Help, Menu, Search, Gadgets.
SAMPLE PATTERN DEFINITION/OUTLINE
Pattern type: Site
Pattern name:
GuestBook
Also known as: website book, website guest book, guestlist
Description: A website guestbook is an area on a website that allows visitors to leave their names to indicate they have been to the site. In most cases, a website guestbook also allows visitors to post their contact information and leave comments. A website guestbook is a helpful addition to any website for a variety of reasons.
Examples :
http://www.a-free-guestbook.com/
http://www.flash-guestbook.com/
Patterns which it plays a part of:
to be added later
Patterns which make up a GuestBook : Contacts, e-mails subscribtions
Comments: One advantage to having a website guestbook is that it provides visitors with a convenient way of communicating with you about any problems they may have encountered while visiting your website. The more positive feedback customers leave on website guestbook, the better potential customers will feel about purchasing from the business. In essence, a website guestbook provides with a means of creating free and unsolicited advertising.
Tags Friend, Forum, Name, Guest, Registration, Comment
SAMPLE PATTERN DEFINITION/OUTLINE
Pattern type: Site or Anti Site
Pattern name:
Para-Site
Also known as: spyware site, misleading site
Description: A para-site is a Web site that mainly depends on a typographical error, domain name mistake, or misspelling to attract people to its Web site. A para-site accomplishes this by choosing a domain name that is very similar to the intended site.
Examples :
www.whitehouse.gov versus www.whitehouse.gov
Patterns which it plays a part of:
to be added later
Patterns which make up a GuestBook : Contacts, e-mails subscribtions
Comments: While some para-sites can be harmless or even a little entertaining, others can be very harmful ( viruses, spyware, pornographic etc)
Tags : the same as in the “real” website
Pattern type: Site
Pattern name:
Photoblog
Also known as: photolog, phlog
Description: A is a form of photo sharing and publishing in the format of a blog. It differs from a blog through the predominant use of and focus on photographs rather than text.
Examples : Photoblog. Com; Flirc
Patterns which it plays a part of:
blog
Patterns which make up a Photoblog : Photos, Comments, Opinions, Search box, Categories , Rankings, Galleries
Comments: Helps preserve memories by date and category ; sharing with people around the world. To work properly needs to have fitted sizes of pictures to be downloaded in short amount of time.
Tags : Pictures, Photography, photobloggers, gallery, art
Subscribe to:
Comments (Atom)
