COAP:COAP-2170: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
mNo edit summary
 
(27 intermediate revisions by the same user not shown)
Line 1: Line 1:
<pageby nominor="false" comments="false"/>
<categorytree mode=pages style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">COAP 2170</categorytree>
 
<categorytree mode="pages" depth="1" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">COAP 2170</categorytree>


== Introduction ==
== Introduction ==
Line 35: Line 33:
* [[Design science]]
* [[Design science]]
* [[Web accessibility]]
* [[Web accessibility]]
== Weekly programs ==
* [[COAP:COAP-2170/week1|Week1]] (introduction, guideline reviews)
* [[COAP:COAP-2170/week2|Week2]] (usability testing)
* [[COAP:COAP-2170/week3|Week3]] (card sorting)
* [[COAP:COAP-2170/week4|Week4]] (wire framing)
* [[COAP:COAP-2170/week5|Week5]] (landing pages, analytics, semantic differentials, mid-term)
* [[COAP:COAP-2170/week6|Week6]] (accessibility)
* [[COAP:COAP-2170/week7|Week7]] (task analysis & mind maps)
* [[COAP:COAP-2170/week8|Week8]]
* [[COAP:COAP-2170/term project|Term project]]


== Grading scale ==
== Grading scale ==
Line 53: Line 63:
Contents addressed within these texts may come up in exam questions. You are not required to memorize any of these, but you should at least read once through the short articles.\
Contents addressed within these texts may come up in exam questions. You are not required to memorize any of these, but you should at least read once through the short articles.\


'''Recommended free on-line textbooks'''
=== Recommended free on-line textbooks ===
 
Reading is optional, however strongly recommended for participants who never took a web design class.
 
* Patrick J. Lynch and Sarah Horton, [http://webstyleguide.com/index.html Web Style Guide].
* Patrick J. Lynch and Sarah Horton, [http://webstyleguide.com/index.html Web Style Guide].
* Horton, Sarah (2005). [http://www.universalusability.com/access_by_design/index.html Access by Design] (online) at Universal Usability: A universal design approach to web usability.
* Horton, Sarah (2005). [http://www.universalusability.com/access_by_design/index.html Access by Design] (online) at Universal Usability: A universal design approach to web usability.


'''Reading list'''
=== Mandatory reading list ===
 
* Midterm: items 1-5, and 9
* Final: all
 
# [[Guidelines-based review|Usability guidelines]]
# [[Guidelines-based review|Usability guidelines]]
## [http://edutechwiki.unige.ch/mediawiki/images/1/10/ISO9241part11.png Picture of the ISO usability framework]
## [http://usability.gov/guidelines/index.html Usability.gov guidelines] (you can download either the whole book or individual chapters). A short summary is in [[Research-Based Web Design & Usability Guidelines]]. I don't require you to read the whole book, but you should be able to retrieve guidelines and understand how the various entries are organized (e.g. importance vs. support from research)
## [http://usability.gov/guidelines/index.html Usability.gov guidelines] (you can download either the whole book or individual chapters). A short summary is in [[Research-Based Web Design & Usability Guidelines]]. I don't require you to read the whole book, but you should be able to retrieve guidelines and understand how the various entries are organized (e.g. importance vs. support from research)
## [http://www.useit.com/alertbox/20020512.html Top Ten Guidelines for Homepage Usability]
## [http://webstyleguide.com/wsg3/4-interface-design/3-interface-design.html Interface Design], a chapter from Lynch and Horton's Web Style Guide.  
## [http://webstyleguide.com/wsg3/4-interface-design/3-interface-design.html Interface Design], a chapter from Lynch and Horton's Web Style Guide.  
# [[Usability testing]]
# [[Usability testing]]
Line 67: Line 84:
## [http://www.usabilitynet.org/tools/diagnostic.htm Diagnostic evaluation] Another short "how-to" page at usabilitynet.
## [http://www.usabilitynet.org/tools/diagnostic.htm Diagnostic evaluation] Another short "how-to" page at usabilitynet.
# [[Usability and user experience surveys]]
# [[Usability and user experience surveys]]
## [http://www.usability.gov/methods/analyze_current/learn/surveys.html Surveys (Online)]
## [http://www.usability.gov/how-to-and-tools/methods/online-surveys.html Surveys (Online)]
## [http://www.ucc.ie/hfrg/resources/qfaq1.html Questionnaires in Usability Engineering], A List of Frequently Asked Questions (3rd Ed.), Compiled by: Jurek Kirakowski, 2000. (Read questions 3,4,8)
## [http://www.ucc.ie/hfrg/resources/qfaq1.html Questionnaires in Usability Engineering], A List of Frequently Asked Questions (3rd Ed.), Compiled by: Jurek Kirakowski, 2000. (Read questions 3,4,8)
# [[Personas]] and [[scenarios of use]]
# [[Personas]] and [[scenarios of use]]
## [http://www.usability.gov/methods/analyze_current/personas.html Develop Personas], 1-page intro at usability.gov
## [http://www.usability.gov/how-to-and-tools/methods/personas.html Develop Personas], 1-page intro at usability.gov
## The Fluid Project includes more detailed information. E.g. [http://wiki.fluidproject.org/display/fluid/Personas What is a Persona?], [http://wiki.fluidproject.org/display/fluid/Persona+Creation Persona Creation] and [http://wiki.fluidproject.org/display/fluid/Persona+Format Fluid Persona Format]. (just skim over these pages)
## The Fluid Project includes more detailed information. E.g. [http://wiki.fluidproject.org/display/fluid/Personas What is a Persona?], [http://wiki.fluidproject.org/display/fluid/Persona+Creation Persona Creation] and [http://wiki.fluidproject.org/display/fluid/Persona+Format Fluid Persona Format]. (just skim over these pages)
## [http://www.infodesign.com.au/usabilityresources/scenarios Scenarios] at Information & Design. A one-page introduction
## [http://www.infodesign.com.au/usabilityresources/scenarios Scenarios] at Information & Design. A one-page introduction
## [http://www.usability.gov/methods/analyze_current/scenarios.html Create Scenarios] at usability.gov. Another 1-page introduction
## [http://www.usability.gov/how-to-and-tools/methods/scenarios.html Create Scenarios] at usability.gov. Another 1-page introduction
# [[web wireframe]]
# [[web wireframe]]
## [http://www.alistapart.com/articles/paperprototyping/ Paper Prototyping] by Shwan Medero, A List Apart, 2007.
## [http://www.alistapart.com/articles/paperprototyping/ Paper Prototyping] by Shwan Medero, A List Apart, 2007.
## [http://en.wikipedia.org/wiki/Website_wireframe Website wireframe] (Wikipedia)
## [http://en.wikipedia.org/wiki/Website_wireframe Website wireframe] (Wikipedia)
# Landing page optimization
# Landing and home page usability and optimization
## [http://unbounce.com/landing-page-design/how-to-create-a-landing-page-design-concept-in-10-minutes/ HOW TO: Create a Landing Page Design Concept in 10 Minutes]
## [http://unbounce.com/landing-page-design/how-to-create-a-landing-page-design-concept-in-10-minutes/ HOW TO: Create a Landing Page Design Concept in 10 Minutes]
## [http://www.useit.com/alertbox/20020512.html Top Ten Guidelines for Homepage Usability]
# Semantic differentials
# Semantic differentials
## [http://www.surl.org/usabilitynews/112/typeface.asp Know Your Typefaces! Semantic Differential Presentation of 40 Onscreen Typefaces] (case study)
## [http://usabilitynews.org/know-your-typefaces-semantic-differential-presentation-of-40-onscreen-typefaces/ Know Your Typefaces! Semantic Differential Presentation of 40 Onscreen Typefaces] (case study)
# Accessibility
## See [[Semantic differential scale]] for some example scales
# [[Web accessibility]]
## [http://uiaccess.com/accessucd/design.html Accessibility in User-Centered Design] (online book chapter)
## [http://uiaccess.com/accessucd/design.html Accessibility in User-Centered Design] (online book chapter)
# The web site development process
# The web site development process
## [http://webstyleguide.com/wsg3/1-process/index.html Process] a chapter from Lynch and Horton's Web Style Guide.  
## [http://www.jjg.net/elements/pdf/elements.pdf The elements of user experience]
# Task Analysis
## [http://edutechwiki.unige.ch/en/User_experience#Components_of_user_experience_design user experience design] (honeycomb model)
## [http://webstyleguide.com/wsg3/1-process/index.html Process] a chapter from Lynch and Horton's Web Style Guide. '''Read all nine sections''' (from the Introduction to "General Advice about Web projects".
# [[Task analysis]]
## [http://www.usabilitynet.org/tools/taskanalysis.htm Task analysis] (short 2-page intro)
## [http://www.usabilitynet.org/tools/taskanalysis.htm Task analysis] (short 2-page intro)
=== Some important wiki pages ===
See also and/or alternatively: The weekly programs
# [[Interaction design, user experience and usability]] (includes good links)
# [[Design and usability methods and techniques]]
# [[Guidelines-based review]]
# [[Usability testing]]
# [[Card sorting]]
# [[Web wireframe]]
# [[Landing page optimization]]
# [[Semantic differential scale]]
# [[Web accessibility]]
# [[Task analysis]]


== Starting points for exploring more ==
== Starting points for exploring more ==
Line 92: Line 128:
* [[Interaction design, user experience and usability‎‎]]
* [[Interaction design, user experience and usability‎‎]]
* [[Design and usability methods and techniques]]
* [[Design and usability methods and techniques]]
* [[COAP-2100/Web design]] (beginner's overview items and readings)
* [[COAP:COAP-2100/Web design]] (beginner's overview items and readings)


[[Category: COAP 2170]]
[[Category: COAP 2170]]
[[Category:Courses and workshops]]
[[Category:Courses and workshops]]

Latest revision as of 16:42, 7 October 2016

COAP 2170
COAP:COAP-2170
COAP:COAP-2170/term project
COAP:COAP-2170/week1
COAP:COAP-2170/week2
COAP:COAP-2170/week3
COAP:COAP-2170/week4
COAP:COAP-2170/week5
COAP:COAP-2170/week6
COAP:COAP-2170/week7
COAP:COAP-2170/week8

Introduction

  • Disclaimer: This is not the official syllabus or course program. EdutechWiki is just used as support site.
  • The course is organized in weekly programs (available through the menu to the right...)

The course-level outcomes as announced in the syllabus are:

  1. Understand the concept of human-computer interaction (HCI)
  2. Understand the need for usable and accessible web interfaces.
  3. Understand usability guidelines.
  4. Discuss various types of disabilities and their impact on computer usage.
  5. Describe a variety of computer assistive technologies.
  6. Understand a variety of methods used to make web content accessible.
  7. Understand the Web Content Accessibility Guidelines.
  8. Implement usability and accessibility testing for web pages/sites.
  9. Successfully implement usable web page(s) that are also accessible.

Practical learning outcomes:

  1. Be able to define user experience in terms of usefulness, usability, accessibility and desirability
  2. Understand the design process and be able to participate in all stages.
  3. Be able to apply experience, interface, usability, and access guidelines
  4. Be able to use some design and usability methods

Fields covered (somewhat)

Weekly programs

Grading scale

A	3.8	Very good		92.00	
A-	3.5	Almost very good	89.00
B+	3.1	Pretty good 		85.00
B	2.8	Good			82.00
B-	2.5	Reasonably good		79.00
C+	2.1	Fair	   		75.00
C	1.8	Rather weak / minim.	72.00
C-	1.5	Minimalist / Weak	69.00
D+	1.1	Pass
D	0.8     Pass			62.00

Important teaching materials

Contents addressed within these texts may come up in exam questions. You are not required to memorize any of these, but you should at least read once through the short articles.\

Recommended free on-line textbooks

Reading is optional, however strongly recommended for participants who never took a web design class.

  • Patrick J. Lynch and Sarah Horton, Web Style Guide.
  • Horton, Sarah (2005). Access by Design (online) at Universal Usability: A universal design approach to web usability.

Mandatory reading list

  • Midterm: items 1-5, and 9
  • Final: all
  1. Usability guidelines
    1. Picture of the ISO usability framework
    2. Usability.gov guidelines (you can download either the whole book or individual chapters). A short summary is in Research-Based Web Design & Usability Guidelines. I don't require you to read the whole book, but you should be able to retrieve guidelines and understand how the various entries are organized (e.g. importance vs. support from research)
    3. Interface Design, a chapter from Lynch and Horton's Web Style Guide.
  2. Usability testing
    1. Usability testing on 10 cents a day. Introduces low-fi usability testing and various connected issues.
    2. Usability testing A short 1-page "how to"
    3. Diagnostic evaluation Another short "how-to" page at usabilitynet.
  3. Usability and user experience surveys
    1. Surveys (Online)
    2. Questionnaires in Usability Engineering, A List of Frequently Asked Questions (3rd Ed.), Compiled by: Jurek Kirakowski, 2000. (Read questions 3,4,8)
  4. Personas and scenarios of use
    1. Develop Personas, 1-page intro at usability.gov
    2. The Fluid Project includes more detailed information. E.g. What is a Persona?, Persona Creation and Fluid Persona Format. (just skim over these pages)
    3. Scenarios at Information & Design. A one-page introduction
    4. Create Scenarios at usability.gov. Another 1-page introduction
  5. web wireframe
    1. Paper Prototyping by Shwan Medero, A List Apart, 2007.
    2. Website wireframe (Wikipedia)
  6. Landing and home page usability and optimization
    1. HOW TO: Create a Landing Page Design Concept in 10 Minutes
    2. Top Ten Guidelines for Homepage Usability
  7. Semantic differentials
    1. Know Your Typefaces! Semantic Differential Presentation of 40 Onscreen Typefaces (case study)
    2. See Semantic differential scale for some example scales
  8. Web accessibility
    1. Accessibility in User-Centered Design (online book chapter)
  9. The web site development process
    1. The elements of user experience
    2. user experience design (honeycomb model)
    3. Process a chapter from Lynch and Horton's Web Style Guide. Read all nine sections (from the Introduction to "General Advice about Web projects".
  10. Task analysis
    1. Task analysis (short 2-page intro)

Some important wiki pages

See also and/or alternatively: The weekly programs

  1. Interaction design, user experience and usability (includes good links)
  2. Design and usability methods and techniques
  3. Guidelines-based review
  4. Usability testing
  5. Card sorting
  6. Web wireframe
  7. Landing page optimization
  8. Semantic differential scale
  9. Web accessibility
  10. Task analysis

Starting points for exploring more

Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=COAP:COAP-2170&oldid=60700"