Common Interface Mistakes - Revision history

Sullij2: /* Examples */

2009-11-22T20:39:25Z

Examples

← Older revision		Revision as of 20:39, 22 November 2009
Line 36:		Line 36:
	[[Image:Set_Time.png‎]]<br>		[[Image:Set_Time.png‎]]<br>
	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.		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.
		+	<br>
		+	===Improper Use of Controls #3===
		+	<br>
		+	[[Image:areyousure.gif‎]]<br>
		+	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.
	<br>		<br>

Sullij2: /* Badly Designed Feedback */

2009-11-22T20:33:27Z

Badly Designed Feedback

← Older revision		Revision as of 20:33, 22 November 2009
Line 51:		Line 51:
	[[Image:Confusing_Message.png]]<br>		[[Image:Confusing_Message.png]]<br>
	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).<br>		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).<br>
-		+	<br>
-	[[Image:bcod1.jpeg]]	+	[[Image:bcod1.jpeg]]<br>

	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.<br>		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.<br>
		+	<br>
		+	[[Image:copyerr.gif]]<br>
		+	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===		===One Size Fits All... but Doesn't===

Rothjl: /* One Size Fits All... but Doesn't */

2009-11-22T03:57:37Z

One Size Fits All... but Doesn't

← Older revision		Revision as of 03:57, 22 November 2009
Line 59:		Line 59:
	<br>		<br>
	[[Image:VLC_Preferences.png]]<br>		[[Image:VLC_Preferences.png]]<br>
-	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.	+	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.<br><br>
-	<br>	+	[[Image:Elm_sidebar.jpg]]<br>
-	[[Image:Elm_sidebar.~~tif~~]]	+	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.<br>
-	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 ==		== 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.		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.

Rothjl: /* Badly Designed Feedback */

2009-11-22T03:55:06Z

Badly Designed Feedback

← Older revision		Revision as of 03:55, 22 November 2009
Line 50:		Line 50:
	<br>		<br>
	[[Image:Confusing_Message.png]]<br>		[[Image:Confusing_Message.png]]<br>
-	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).	+	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).<br>
-	<br>	+
	[[Image:bcod1.jpeg]]		[[Image:bcod1.jpeg]]
-	~~<br>~~	+
-	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.<br>	+	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.<br>

	===One Size Fits All... but Doesn't===		===One Size Fits All... but Doesn't===

Rothjl at 03:52, 22 November 2009

2009-11-22T03:52:45Z

← Older revision		Revision as of 03:52, 22 November 2009
Line 51:		Line 51:
	[[Image:Confusing_Message.png]]<br>		[[Image:Confusing_Message.png]]<br>
	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).		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).
		+	<br>
		+	[[Image:bcod1.jpeg]]
		+	<br>
		+	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.<br>

-	===~~Example 6:~~===	+	===One Size Fits All... but Doesn't===
	<br>		<br>
	[[Image:VLC_Preferences.png]]<br>		[[Image:VLC_Preferences.png]]<br>
	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.		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.
		+	<br>
		+	[[Image:Elm_sidebar.tif]]
		+	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 ==		== 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.		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.

Scottj4: /* Example 6: */

2009-11-15T17:50:54Z

Example 6:

← Older revision		Revision as of 17:50, 15 November 2009
Line 55:		Line 55:
	<br>		<br>
	[[Image:VLC_Preferences.png]]<br>		[[Image:VLC_Preferences.png]]<br>
-	Is the ~~picture supposed~~ to ~~look like this? Because~~ the ~~button at bottom is messed~~. ~~~Lucas~~	+	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.

	== Conclusion ==		== 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.		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.

Beyakle: The "Example x" titles for examples were taken out, they were redundant since this is the example section and they are already indexed by TOC box

2009-11-14T22:35:55Z

The "Example x" titles for examples were taken out, they were redundant since this is the example section and they are already indexed by TOC box

← Older revision		Revision as of 22:35, 14 November 2009
Line 21:		Line 21:
	== Examples ==		== Examples ==

-	===~~Example 1 -~~ No Shortcuts===	+	===No Shortcuts===
	<br>		<br>
	[[Image:Interface_Example1.JPG]]<br>		[[Image:Interface_Example1.JPG]]<br>
Line 27:		Line 27:
	<br>		<br>

-	===~~Example 2 -~~ Improper Use of Controls===	+	===Improper Use of Controls===
	<br>		<br>
	[[Image:Interface_Example2.JPG]]<br>		[[Image:Interface_Example2.JPG]]<br>
	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.<br>		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.<br>

-	===~~Example 3 -~~ Improper Use of Controls #2===	+	===Improper Use of Controls #2===
	<br>		<br>
	[[Image:Set_Time.png‎]]<br>		[[Image:Set_Time.png‎]]<br>
Line 38:		Line 38:
	<br>		<br>

-	===~~Example 4 -~~ Inconsistency and No Shortcuts===	+	===Inconsistency and No Shortcuts===
	<br>		<br>
	[[Image:Template_Selection.png]]<br>		[[Image:Template_Selection.png]]<br>
Line 47:		Line 47:
	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.		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.

-	===~~Example 5 -~~ Badly Designed Feedback===	+	===Badly Designed Feedback===
	<br>		<br>
	[[Image:Confusing_Message.png]]<br>		[[Image:Confusing_Message.png]]<br>

Beyakle: I think the changed titles add to the wiki - change them as neccessary or delete them or whatever

2009-11-14T22:33:22Z

I think the changed titles add to the wiki - change them as neccessary or delete them or whatever

← Older revision		Revision as of 22:33, 14 November 2009
Line 21:		Line 21:
	== Examples ==		== Examples ==

-	===Example 1:===	+	===Example 1 - No Shortcuts===
	<br>		<br>
	[[Image:Interface_Example1.JPG]]<br>		[[Image:Interface_Example1.JPG]]<br>
Line 27:		Line 27:
	<br>		<br>

-	===Example 2:===	+	===Example 2 - Improper Use of Controls===
	<br>		<br>
	[[Image:Interface_Example2.JPG]]<br>		[[Image:Interface_Example2.JPG]]<br>
	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.<br>		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.<br>
-	===Example 3:===	+
		+	===Example 3 - Improper Use of Controls #2===
	<br>		<br>
	[[Image:Set_Time.png‎]]<br>		[[Image:Set_Time.png‎]]<br>
	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.		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.
	<br>		<br>
-	===Example 4:===	+
		+	===Example 4 - Inconsistency and No Shortcuts===
	<br>		<br>
	[[Image:Template_Selection.png]]<br>		[[Image:Template_Selection.png]]<br>
Line 45:		Line 47:
	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.		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.

-	===Example 5:===	+	===Example 5 - Badly Designed Feedback===
	<br>		<br>
	[[Image:Confusing_Message.png]]<br>		[[Image:Confusing_Message.png]]<br>

Beyakle: /* Example 6: */

2009-11-14T02:59:48Z

Example 6:

← Older revision		Revision as of 02:59, 14 November 2009
Line 53:		Line 53:
	<br>		<br>
	[[Image:VLC_Preferences.png]]<br>		[[Image:VLC_Preferences.png]]<br>
		+	Is the picture supposed to look like this? Because the button at bottom is messed. ~Lucas

	== Conclusion ==		== 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.		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.

Scottj4: /* Examples */

2009-11-13T23:58:44Z

Examples

← Older revision		Revision as of 23:58, 13 November 2009
Line 49:		Line 49:
	[[Image:Confusing_Message.png]]<br>		[[Image:Confusing_Message.png]]<br>
	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).		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).
		+
		+	===Example 6:===
		+	<br>
		+	[[Image:VLC_Preferences.png]]<br>

	== Conclusion ==		== 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.		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.