Computing and Software Wiki - User contributions [en]

User:Skip

2009-11-23T19:20:39Z

Sullij2: /* Topics: */

= Human Computer Interaction =

=='''This is the projects main page for cs4hc3 and se4f03''' -- ''HCI / CHI'' Courses.==

===Objectives===

===Logistics===
<ul>
<li>
During the middle of term the class will be divided into about 12 (n) groups, each of whom will negotiate amongst
themselves a topic of concentration from the list below with at least three ranked by selected priority.
At an early designated lecture, each group will be linked to a topic of their choice in a first-come/first-served
basis -- only one group per project.
</li>
<li>
Group members should all have their associated member email addresses and use these to generate a wiki in one of the
groups member names. Note that ALL changes made to a wiki are logged by IP address of the machine, as well as time
and date. By law Derek Lipiec MUST always be running an audit trail system which essentially operates as a key logger
in that if any vandalism is done electronically, he can determine who is logged on, from where as well as what was typed.
This is a warning that anyone modifying a group's wiki who is NOT a member of that group will be caught and risk a zero
grade for this assignment exists. Therefore "play safe" and do not fool around. (wfsp)
</li>
<li>
Just after several weeks of class duration, a created wiki from each group will be completed
and marked. As soon as scheduled, these dates will be posted in the ELM calendar for this course.
</li>
<li>
Part of this mark will be composed of 12 other rankings (by three groups of four members each as listed below)
from each of the other group members, done individually, who will rank and provide one sentence
of what is best and one sentence of what is worst about the subject wiki under consideration. This is done
through sending Dr.Poehlman an email with the three marks and single sentences for like and dislike reasons.
The ranking for each wiki will be compiled by the instructor and posted anonymously for class consideration
and discussion near the end of term.
</li>
</ul>

===Topics:===
Reference -- adapted from ACM (Association for Computing Machinery -- but people can join, too!) http://wiki.acm.org/cs2001/index.php?title=HUMAN-COMPUTER_INTERACTION
<OL>
<Li> '''Motivation:''' Why the study of how people interact with technology is vital for the development of most usable and acceptable systems. [[Motivations for the Studying of HCI]] (Taken by Group 10 -- wfsp/15nov09@14:30) </Li>
<Li> '''Contexts for HCI:''' mobile devices, consumer devices, business applications, web, business applications, collaboration systems, games, etc. [[Contexts for HCI]] (Taken by Group 8 -- wfsp/05nov09@14:00)</Li>
<Li> '''[[Process_for_User-centered_Development]]:''' early focus on users, empirical testing, iterative design. (Specified for Group 11 -- wfsp/15nov09@14:30) </Li>
<Li> '''Different measures for evaluation:''' utility, efficiency, learnability, user satisfaction. (Taken by Group 5 -- wfsp/10nov09@13:00)</Li>
<Li> '''Models that inform human-computer interaction (HCI) design:''' attention, perception and recognition, movement, and cognition.</Li>
<Li> '''Social issues influencing HCI design and use:''' culture, communication, and organizations. (Taken by Group 3 -- wfsp/13nov09@15:30) </Li>
<Li> '''Accommodating human diversity:''' including universal design and accessibility and designing for multiple cultural and linguistic contexts. (Taken by Group 9 -- wfsp/12nov09@13:30)</Li>
<Li> The most '''[[Common Interface Mistakes]]'''. (Taken by Group 1 -- wfsp/04nov09@17:00)</Li>
<Li> '''[[User Interface Standards]]'''. (Taken by Group 6 -- wfsp/05nov09@19:30)</Li>
<Li> The '''five interaction styles''' as espoused by [[B.Scheidermann]]. (Taken by Group 7 -- wfsp/04nov09@17:30)</Li>
<Li> The '''Object-Action''' (or visa-versa) '''model''' and its applications. [[The Object-Action (or_visa-versa) model and its applications]](Specified for Group 2 -- wfsp/15nov09@14:30) </Li>
<Li> The '''direct manipulation method''' and its importance to CHI. [[Direct Manipulation]] (Taken by Group 4 -- wfsp/06nov09@09:30) </Li>
</OL>
<h4>
Marking Duties for Each Group:
</h4>
<table border="1">
<tr>
<th>
Group Mark1 Mark2 Mark3
</th>
</tr>
<tr>
<td>
1 Group 2 Group 3 Group 4
</td>
</tr>
<tr>
<td>
2 Group 3 Group 4 Group 5
</td>
</tr>
<tr>
<td>
3 Group 4 Group 5 Group 6
</td>
</tr>
<tr>
<td>
4 Group 5 Group 6 Group 7
</td>
</tr>
<tr>
<td>
5 Group 6 Group 7 Group 8
</td>
</tr>
<tr>
<td>
6 Group 7 Group 8 Group 9
</td>
</tr>
<tr>
<td>
7 Group 8 Group 9 Group 10
</td>
</tr>
<tr>
<td>
8 Group 9 Group 10 Group 11
</td>
</tr>
<tr>
<td>
9 Group 10 Group 11 Group 01
</td>
</tr>
<tr>
<td>
10 Group 11 Group 01 Group 02
</td>
</tr>
<tr>
<td>
11 Group 01 Group 02 Group 03
</td>
</tr>
</table>

----

=='''This is the VRML assignment main page for cs4hc3 and se4f03''' -- ''HCI / CHI'' Courses.==
NOTE: This is NOT required for the 2009-2010 version of this course.
===Some Important References:===

<UL>
<li>
The Custom Courseware for this course has an Appendix section for VRML beginners so this is a good place to begin studying if you are not familiar with the Virtual Reality Modelling Language. We will be using this to create 3-D interfaces for 3-D worlds, just to get some practice in thinking in more than two dimensions. Although VRML has been around for more than a decade, it is still found as the 3-D layer in MPEG4, has been updated and in a standard in the W3C world known as X3D, which is just VRML with <elements> instead of reserved keywords. If you know VRML, you know X3D.
</li>
<li>
To begin our study of the Virtual Reality Modeling Language (VRML), we need to get setup to view the VRML code (which is in pure ASCII, as is Javascript, etc.) To create VRML, use any ASCII editor that you like best. I use Crimson Editor which has a built-in context sensitive markup that understands VRML, so it is easy to distinguish comments from verbs and nouns, etc.
Go to http://sourceforge.net/projects/emeraldeditor/files/ where Emerald Editor (the newest version of the Crimson editor) can be downloaded freely. To interpret VRML code (nested in HTML code) you need a plug-in. The best that I have found is called Cortona from Parallel Graphics at http://www.cortona3d.com/cortona/ . It works best with Apple Safari Browser version 4 from http://www.apple.com/safari/download/ . All of this information is at the end of the course web site section on VRML at http://www.cas.mcmaster.ca/~se4d03/demo.html#VRML headed with the title "Recommended Client Applications". By the way, Parallel Graphics has an editor called VRMLPad that is not free but can be downloaded as a trial version, which may help the beginner as it provides a thumbnail sketch at the margin right when it recognizes any VRML code shape primitives -- interesting thing to see work.
</li>
<li>
As far as web references go, the best place to start is on the course web site: --
http://www.cas.mcmaster.ca/~se4d03/demo.html#VRML
</li>
<ol>
<li>
Once here you can take the tutorial, done by a senior thesis student Polo Cerone several year's ago.
It can be taken on-line or downloaded and worked through locally -- either is equivalent.
</li>
<li>
Once the tutorial is taken, there are many example VRML code snippets that can be viewed with whatever browser plug-in that you have installed. Pay particular attention to the graduated examples that show how one specifically goes about creating an interface in VRML that controls objects in the main scene graph. This is located back near the beginning of the VRML section titled "Graduated VRML2 Interface Examples".
</li>
</ol>
</UL>

Common Interface Mistakes

2009-11-22T20:39:25Z

Sullij2: /* Examples */

== Introduction ==

[http://en.wikipedia.org/wiki/Graphical_user_interface Graphical User Interfaces] (GUI's) are a commonly used tool to assist novice and expert users alike to perform operations with applications. Since this GUI may be the only means by which the user can access the program's operations, it must be done well and with careful consideration.

== Schneiderman's Eight Golden Rules of Interface Design ==

[http://en.wikipedia.org/wiki/Ben_Shneiderman Ben Schneiderman], an American computer scientist and researcher in the field of human–computer interaction (HCI), outlined in his book "Designing the User Interface" the following rules for interface design: 
 
1. Strive for consistency 
2. Enable frequent users to use short-cuts 
3. Offer informative feedback 
4. Design dialogs to yield closure 
5. Offer error prevention and simple error handling 
6. Permit easy reversal of actions 
7. Support internal locus of control 
8. Reduce short-term memory load 
 
These rules make for a good outline when designing an interface for a customer, colleague, or friend.

== Examples ==

===No Shortcuts===
 
[[Image:Interface_Example1.JPG]] 
As stated in Schneiderman’s Eight Golden Rules of Interface Design, there should be shortcuts available to frequent users of the application. In this example of the “LTS Analyser”, there are no shortcut keys to access the menu items. This means there is no quick way to make a new file, save, load, or quit. This can cause great frustration for users that are accustomed to being able to use the same common shortcut keys that are present in most applications. 
 

===Improper Use of Controls===
 
[[Image:Interface_Example2.JPG]] 
There are form controls that serve different purposes in interface design. This example uses checkboxes, where radio buttons would be much more appropriate. This is because multiple checkboxes can be selected, while only a single radio button is available at an instance in time. If the user selects more than one checkbox for their Cash Back amount, how much cash will they receive? It is completely unknown to the user. 

===Improper Use of Controls #2===
 
[[Image:Set_Time.png‎]] 
The time in the text field appears to be editable, however it is not. This is a bad affordance. The only way to set the time is to press the "Set Time" button, which then pops up a new dialog with an analog clock face. To set the time with this clock face the user must use their left mouse button to change the minutes and their right mouse button to change the hours. Also the way in which the times are displayed lacks consistency, the time on the right (in the textbox) is in 24-hour time and the one at the top left is in 12-hour time.
 
===Improper Use of Controls #3===
 
[[Image:areyousure.gif‎]] 
Here the user is presented with a message box asking if they would like to delete a file. The user is only given the option "OK" where it should be "YES" or "NO." This can frustrate users as they cannot prevent the file from being deleted.
 

===Inconsistency and No Shortcuts===
 
[[Image:Template_Selection.png]] 
This example allows a user to select a template from a given list of templates. In the instructions to the left its says "... press OKAY", the user will not be able to find this since the button it is intended for is labeled as "OK". This will confuse a novice user.
 
The horizontal scroll bar is not consistent with other applications. Here the scroll bar moves the user through the list of templates. Generally the horizontal scroll bar shows the unseen area of the current selection. This should be replaced with forward and back buttons.
 
Finally for an experienced user who knows exactly what template they want, there is no quick way to go to or find that template. This is lacking a shortcut for the user to enter the one they want. Also even if there was a place for the user to enter the number of the one they wanted, they would have no idea which one it was because as we can see from the image there are no references to how many templates there are or what template you are currently on.

===Badly Designed Feedback===
 
[[Image:Confusing_Message.png]] 
This message is displayed when the user has selected more than 20 rows inside of a database and pressed the delete button. First sentence in this message is useless, this is just telling the user exactly what they have just done. The second sentence asks if user wants to save the text into the undo buffer. There are two problems with this, what is the "undo buffer" and the user is trying to ''delete'' something not ''save'' something. This is poorly worded and uses technical jargon. The final sentence adds more pressure to the user and does not make the situation more clear. For a novice user they will only be guessing which button to pick, and there is no clear way to get out of this menu and return to the previous state (no ease of reversal). 
 
[[Image:bcod1.jpeg]] 

The blue screen of death is a common error that occurred in windows 95, 98 and XP. It caused the operating system to crash and required a system restart. This example is a clear violation of rule 3:Offer informative feedback. The error message is cryptic and leaves the user in the dark about what caused the error. A good design would inform the user of what caused the error and possibly how to fix it. 
 
[[Image:copyerr.gif]] 
Here, the user is presented with an error message, yet the operation completed successfully. This type of feedback can be very confusing to novice users. Messages signalling success should not appear as errors.

===One Size Fits All... but Doesn't===
 
[[Image:VLC_Preferences.png]] 
The very popular video player VLC, has some interface problems on their mac version. As you can see the user is able to resize the the Preferences panel which completely distorts the interface making it unusable. This was originally found when some of the options were cut off the screen in the original window size, the picture depicts an extreme case. 
[[Image:Elm_sidebar.jpg]] 
Here is another example of an interface preventing functionality. At the time of conception, the designer did not consider that some file names are long. Here the user cannot read the file description. The design only works with small file names. The good user interface designer needs to account for both the current and future use of his product. 

== Conclusion ==

It is very important for current and future software developers, especially in the field of HCI, to be aware of the issues presented in this document. Even a fantastic application, having high efficiency and complex algorithms will greatly suffer and become useless very quickly if it has a poorly designed user interface.

File:Areyousure.gif

2009-11-22T20:35:48Z

Sullij2: When asking a question, give the user some choices.

When asking a question, give the user some choices.

Common Interface Mistakes

2009-11-22T20:33:27Z

Sullij2: /* Badly Designed Feedback */

== Introduction ==

[http://en.wikipedia.org/wiki/Graphical_user_interface Graphical User Interfaces] (GUI's) are a commonly used tool to assist novice and expert users alike to perform operations with applications. Since this GUI may be the only means by which the user can access the program's operations, it must be done well and with careful consideration.

== Schneiderman's Eight Golden Rules of Interface Design ==

[http://en.wikipedia.org/wiki/Ben_Shneiderman Ben Schneiderman], an American computer scientist and researcher in the field of human–computer interaction (HCI), outlined in his book "Designing the User Interface" the following rules for interface design: 
 
1. Strive for consistency 
2. Enable frequent users to use short-cuts 
3. Offer informative feedback 
4. Design dialogs to yield closure 
5. Offer error prevention and simple error handling 
6. Permit easy reversal of actions 
7. Support internal locus of control 
8. Reduce short-term memory load 
 
These rules make for a good outline when designing an interface for a customer, colleague, or friend.

== Examples ==

===No Shortcuts===
 
[[Image:Interface_Example1.JPG]] 
As stated in Schneiderman’s Eight Golden Rules of Interface Design, there should be shortcuts available to frequent users of the application. In this example of the “LTS Analyser”, there are no shortcut keys to access the menu items. This means there is no quick way to make a new file, save, load, or quit. This can cause great frustration for users that are accustomed to being able to use the same common shortcut keys that are present in most applications. 
 

===Improper Use of Controls===
 
[[Image:Interface_Example2.JPG]] 
There are form controls that serve different purposes in interface design. This example uses checkboxes, where radio buttons would be much more appropriate. This is because multiple checkboxes can be selected, while only a single radio button is available at an instance in time. If the user selects more than one checkbox for their Cash Back amount, how much cash will they receive? It is completely unknown to the user. 

===Improper Use of Controls #2===
 
[[Image:Set_Time.png‎]] 
The time in the text field appears to be editable, however it is not. This is a bad affordance. The only way to set the time is to press the "Set Time" button, which then pops up a new dialog with an analog clock face. To set the time with this clock face the user must use their left mouse button to change the minutes and their right mouse button to change the hours. Also the way in which the times are displayed lacks consistency, the time on the right (in the textbox) is in 24-hour time and the one at the top left is in 12-hour time.
 

===Inconsistency and No Shortcuts===
 
[[Image:Template_Selection.png]] 
This example allows a user to select a template from a given list of templates. In the instructions to the left its says "... press OKAY", the user will not be able to find this since the button it is intended for is labeled as "OK". This will confuse a novice user.
 
The horizontal scroll bar is not consistent with other applications. Here the scroll bar moves the user through the list of templates. Generally the horizontal scroll bar shows the unseen area of the current selection. This should be replaced with forward and back buttons.
 
Finally for an experienced user who knows exactly what template they want, there is no quick way to go to or find that template. This is lacking a shortcut for the user to enter the one they want. Also even if there was a place for the user to enter the number of the one they wanted, they would have no idea which one it was because as we can see from the image there are no references to how many templates there are or what template you are currently on.

===Badly Designed Feedback===
 
[[Image:Confusing_Message.png]] 
This message is displayed when the user has selected more than 20 rows inside of a database and pressed the delete button. First sentence in this message is useless, this is just telling the user exactly what they have just done. The second sentence asks if user wants to save the text into the undo buffer. There are two problems with this, what is the "undo buffer" and the user is trying to ''delete'' something not ''save'' something. This is poorly worded and uses technical jargon. The final sentence adds more pressure to the user and does not make the situation more clear. For a novice user they will only be guessing which button to pick, and there is no clear way to get out of this menu and return to the previous state (no ease of reversal). 
 
[[Image:bcod1.jpeg]] 

The blue screen of death is a common error that occurred in windows 95, 98 and XP. It caused the operating system to crash and required a system restart. This example is a clear violation of rule 3:Offer informative feedback. The error message is cryptic and leaves the user in the dark about what caused the error. A good design would inform the user of what caused the error and possibly how to fix it. 
 
[[Image:copyerr.gif]] 
Here, the user is presented with an error message, yet the operation completed successfully. This type of feedback can be very confusing to novice users. Messages signalling success should not appear as errors.

===One Size Fits All... but Doesn't===
 
[[Image:VLC_Preferences.png]] 
The very popular video player VLC, has some interface problems on their mac version. As you can see the user is able to resize the the Preferences panel which completely distorts the interface making it unusable. This was originally found when some of the options were cut off the screen in the original window size, the picture depicts an extreme case. 
[[Image:Elm_sidebar.jpg]] 
Here is another example of an interface preventing functionality. At the time of conception, the designer did not consider that some file names are long. Here the user cannot read the file description. The design only works with small file names. The good user interface designer needs to account for both the current and future use of his product. 

== Conclusion ==

It is very important for current and future software developers, especially in the field of HCI, to be aware of the issues presented in this document. Even a fantastic application, having high efficiency and complex algorithms will greatly suffer and become useless very quickly if it has a poorly designed user interface.

File:Copyerr.gif

2009-11-22T20:25:36Z

Sullij2: Success should not result in an error message.

Success should not result in an error message.

Common Interface Mistakes

2009-11-10T17:37:42Z

Sullij2: New page: Common Interface Mistakes

Common Interface Mistakes