UXCheck/tray.html at master · mbehrooz/UXCheck · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

<div class="reset" id="he_tray">
	<div class="reset" id="he_actions">
		<div id="he_UX_CHECK_logo">UX CHECK</div>
		<div id="he_action_buttons">
			<div class="he_tray_button" id="pause_selection" title="Ctrl+P">Pause selection</div>
			<div id="he_tooltip_container">
				<div id="he_tooltip">Ctrl+P</div>
				<div id="he_tooltip_triangle"></div>
			</div>
			<div class="he_tray_button" id="he_view_progress">View progress</div>
			<div class="he_tray_button" id="stop_evaluation">Stop evaluation</div>
		</div>
		<!--<button class="reset tab" id="heuristics_tab" aria-selected="true" role="tab">Heuristics</button>
		<button class="reset tab"  id="screenshots_tab" aria-selected="false" role="tab">Screenshots</button>-->
	</div>
	<div id="he_card_container" class="reset">
		<div class="he_card reset" tabindex="0">
			<h2 class="reset he_card_title">Visibility of system status</h2>
			<p class="reset he_card_text">The system should keep users informed through appropriate feedback within reasonable time.</p>
		</div>
		<div class="he_card reset" tabindex="0">
			<h2 class="reset he_card_title">Match between system and the real world</h2>
			<p class="reset he_card_text">The system should speak the users' language rather than system-oriented terms. Follow real-world conventions.</p>
		</div>
		<div class="he_card reset" tabindex="0">
			<h2 class="reset he_card_title">User control and freedom</h2>
			<p class="reset he_card_text">Users often make mistakes and need "emergency exits" to leave the unwanted state. Support undo and redo.</p>
		</div>
		<div class="he_card reset" tabindex="0">
			<h2 class="reset he_card_title">Consistency and standards</h2>
			<p class="reset he_card_text">Users shouldn't have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.</p>
		</div>
		<div class="he_card reset" tabindex="0">
			<h2 class="reset he_card_title">Error prevention</h2>
			<p class="reset he_card_text">Prevent problems from occuring in the first place, or check for them and present users with a confirmation option before they commit to the action.</p>
		</div>
		<div class="he_card reset" tabindex="0">
			<h2 class="reset he_card_title">Recognition rather than recall</h2>
			<p class="reset he_card_text">Minimize memory load by making objects, actions, and options visible. Instructions should be visible or easily retrievable.</p>
		</div>
		<div class="he_card reset" tabindex="0">
			<h2 class="reset he_card_title">Flexibility and efficiency of use</h2>
			<p class="reset he_card_text">Accelerators - unseen by the novice user - may often speed up the interaction for the expert user. Allow users to tailor frequent actions.</p>
		</div>
		<div class="he_card reset" tabindex="0">
			<h2 class="reset he_card_title">Aesthetic and minimalist design</h2>
			<p class="reset he_card_text">Dialogues should not contain information which is irrelevant or rarely needed.</p>
		</div>
		<div class="he_card reset" tabindex="0">
			<h2 class="reset he_card_title">Help recognize & recover from errors</h2>
			<p class="reset he_card_text">Error messages should be expressed in plain language, indicate the problem, and suggest a solution.</p>
		</div>
		<div class="he_card reset" tabindex="0">
			<h2 class="reset he_card_title">Help and documentation</h2>
			<p class="reset he_card_text">Any necessary help documentation should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.</p>
		</div>
		<div class="he_card reset" tabindex="0">
			<h2 class="reset he_card_title">Other</h2>
			<p class="reset he_card_text"></p>
		</div>
	</div>
	<a href="mailto:cgallello@outlook.com" id="he_feedback">Send Feedback</a>
</div>
<div id="he_progress"></div>