[Level 1] Computer Science Concepts: User Interfaces

What is this Resource?

This document was prepared by Sumant Murugesh, Tim Bell and Vanja Venrooy at the University of Canterbury. It is not an official document, but is offered as an evolving guide to the resources that are available for teaching the new material in NCEA Digital Technologies (currently focussed on the Programming and Computer Science strand). The structure has been based on various versions of the Body of Knowledge, proposed Standards, and Teaching and Learning guide; the material comes from an extensive search for relevant resources. It is our hope that this resource will evolve based on feedback from teachers, and ultimately end up as teaching plans that are built on the resources. Feedback can be sent to tim.bell [at] canterbury.ac.nz.

Achievement Standard
The resources on this page relate mostly to the Digital Technologies Achievement Standard 1.44/AS91074 (Demonstrate understanding of basic concepts from computer science)

Objectives
Demonstrate an understanding of the distinguishing concepts of algorithms and programming languages from Computer Science and Software Engineering

  • Understand the role of user interfaces
  • Informally evaluate user interfaces by looking at the factors that influence its usability
  • Compare and contrast different user interfaces

Context
At this level, students will need to gain an understanding of what user interfaces are, the importance of usability and therefore evaluate different interfaces based on different criteria

Ideas for Teaching and Learning Activities

  • Identify a frustrating user interface, and explain why it is difficult to use.
  • Have a parent or grandparent try to perform a simple task on an unfamiliar digital device (such as send a text message, or set the time on a microwave oven clock), noting down every keypress they make and noting any problems they have. Write a report on specific problems with the design of the interface for this user.
  • Develop an instruction manual for a simple task on a simple interface, such as a digital watch, video/TV recorder, air conditioning remote control, or cellphone
  • Compare the interfaces for two different devices, such as two cellphones, two mp3 players, or even two car alarm remote controls. What are the relative merits of the different interfaces for the same task?
  • Investigate the usability of a remote control and a VCR at Usability Review of a Remote Control, Usability Review of a VCR
  • Try a Kinesthetic Learning Activity where a human is acting like a robot with a broken interface at Human Mystery Interface
  • Do the CS Unplugged activity on Human-Computer Interface design
  • Create a poster showing bad designs of digital devices, relating them to bad designs of physical objects. See Bad Human Factors Design
  • A fun way to get students interested and talking will be the Bad Usability Calender which can be printed as a poster or handouts given out
  • At an advanced level, students can investigate usability heuristics are at Jacob Nielsen's page on heuristic evaluation

Our Picks
Here is a list of resources we have picked from the comprehensive list below that were either developed for high school use or can be easily adapted for the purpose.

  • The Interface Hall of Shame is an irreverent collection of common interface design mistakes

  • Schneiderman and Plaisant's book "Designing the User Interface" provides a very readable overview of the field. It has a lot more detail than students would need, but would be useful for a teacher who wants to get a stronger background in the topic. You don't need a strong technical background to read it.
  • Don Norman's "The Design of Everyday Things" is a classic interface design book. It's an older book, and talks mainly about non-computer interfaces (such as phones, doors and nuclear power plant controls), but it's inexpensive, and is a fun read to get you in a frame of mind to evaluate computer interfaces. Worth getting for the school library.

 

Unit Plan
A Unit Plan for teaching that uses some of the above resources that relates to this standard is attached as a PDF at the bottom of this resource page.

Comprehensive list of resources that relate to this standard

The resources below are a mixture that were developed for a varied audience ranging from high school students to university undergraduates, therefore we have attempted to classify the resources in terms of their readiness to be used by teachers. There are those that aim to convey a Basic understanding of the concepts and those that are Advanced and therefore might assist teachers with their professional development activities.

Online Guides: Basic Resources
These set of resources aim at conveying a basic understanding of the concepts with tutorials, lecture notes and handouts.

  • Isys Information Architects Inc has two excellent websites of particular interest below. Even though a bit outdated these are excellent sources of examples of bad designs and discussions:
    1. The Interface Hall of Shame is an irreverent collection of common interface design mistakes. Our hope is that by highlighting these problems, we can help developers avoid making similar mistakes.
    2. Interface Hall of Fame is a collection of design solutions that will likely improve the effectiveness and usability of all applications that employ them.
  • informationArchitect Japan has an interesting and different view at The Interface of a Cheeseburger. This article discusses the notion that shaping interfaces is shaping the character of things. The brand is what transports the character of things. When looking at McDonalds, iPod, Nintendo DS it becomes quite obvious that the interface is the brand.
  • Bill Moggridge' s Designing Interactions is a book as well as a website that introduces us to 40 influential designers who have shaped our interaction with technology. A free summary of each chapter is on this site. Note: Some chapters are regularly offered free as PDF's with extra materials, so it pays to check the site regularly and download the chapters as they become freely available.

  • seagate has a Web Style Guide that discusses the anatomy of a webpage, colors, page types, graphics. This resource could be useful to demonstrate the impact of HCI in designing websites.

  • Web Pages That Suck is a great website with a vast collection of badly designed webpages and reviews.

  • Stanford University's MouseSite is a resource for exploring the history of human computer interaction beginning with the pioneering work of Douglas Engelbart and his colleagues at Stanford Research Institute in the 1960s.
  • Ask Tog has First Principles of Interaction Design explaning principles that are fundamental to the design and implementation of effective interfaces, whether for traditional GUI environments, the web, or mobile devices. Of late, many web applications and mobile device apps and even operating systems have reflected a lack of understanding of many of these principles of interaction design, to their detriment. Because an application or service appears on the web or mobile device, the principles do not change. If anything, applying these principles becomes even more important.

 

 

Online Guides: Advanced Resources

  • Dave Sheppard has an article Evolve your User Interface to educate your Users. User interfaces need to teach your user how to use your application without resorting to a help screen. Many developers think that a help section will suffice for teaching users how to operate most any application, but this is not the case.
  • Online-Learning has a course in User Interface Design. Some parts of this course are available freely for evaluation purposes.

  • Niall Murphy has reviewed some books on usability. Teachers may go through some of these and check what interests them and also to teach the subject with good examples at Usability.

  • GNOME has a website devoted to GNOME Human Interface Guidelines 2.2.1 (at the time this resource was sighted) discussing usability principles and GUI design guidelines in an online textbook format.

Classroom Activities and Games: Basic Resources
These set of resources aim at conveying a basic understanding of the concepts with tutorials, lecture notes and handouts.

  • Steve Wolfman has a KLA for HCI courses in which a student is a robotic toy with a simple, broken interface. The class watches another person interact with the toy and then discusses what went wrong. They design a new interface for the toy which they test in similar fashion. Students learn to use their classroom knowledge to fashion and iterate on a simple example. Because the "system" is a human, students have no concerns about the fidelity of their interface design or its "hardware constraints". View here at Human Mystery Interface.

  • Michael J. Darnell has a really fun website baddesigns which is scrapbook of illustrated examples of things that are hard to use because they do not follow human factors principles.

    This scrapbook contains many humorous bad designs that you can use to demonstrate what is being done wrong and ask students to suggest a better design.

  • EPSSCentral has exercises that illustrate design principles at locations below:

    1. ESP (Extrasensory Perception): demonstration of a breakthrough extrasensory perception (ESP). Software that knows what you are thinking. Is it possible? You be the judge.

    2. Pick A Number: illustrates the nature of human perception.

    3. How Many: illustrates the nature of human cognition.

    4. Calculation Exercise: illustrates the nature of human cognition.

Classroom Activities and Games: Advanced Resources

Videos: Basic Resources

 

Videos: Advanced Resources

AttachmentSize
Computer Science Concepts AS 1.44 Unit Outline - 09.08.10.pdf275.44 KB
Groups: