COAP:COAP-2170: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
mNo edit summary
 
(36 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 21: Line 19:


Practical learning outcomes:
Practical learning outcomes:
# Be able to define '''user experience''' in terms of '''usefulness, usability, accessibility and desirabilty'''
# Be able to define '''user experience''' in terms of '''usefulness, usability, accessibility and desirability'''
# Understand the design process and be able to participate in all stages.
# Understand the design process and be able to participate in all stages.
# Be able to apply experience, interface, usability, and access guidelines
# Be able to apply experience, interface, usability, and access guidelines
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 51: Line 61:
== Important teaching materials ==
== 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.
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, [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.
 
=== Mandatory reading list ===
 
* Midterm: items 1-5, and 9
* Final: all


# [[Guidelines-based review|Usability guidelines]]
# [[Guidelines-based review|Usability guidelines]]
## [http://usability.gov/guidelines/index.html Usability.gov guidelines] (the whole book, 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://edutechwiki.unige.ch/mediawiki/images/1/10/ISO9241part11.png Picture of the ISO usability framework]
## [http://www.useit.com/alertbox/20020512.html Top Ten Guidelines for Homepage Usability]
## [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://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 62: 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 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://www.useit.com/alertbox/20020512.html Top Ten Guidelines for Homepage Usability]
# Semantic differentials
## [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)
## See [[Semantic differential scale]] for some example scales
# [[Web accessibility]]
## [http://uiaccess.com/accessucd/design.html Accessibility in User-Centered Design] (online book chapter)
# The web site development process
## [http://www.jjg.net/elements/pdf/elements.pdf The elements of user experience]
## [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)
=== Some important wiki pages ===


(more later, this list will be completed progressively ...)
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 79: 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]]

Latest revision as of 15: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"