fisheye/index.html at main · gonpenta/fisheye · 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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Usability Heuristics Guide</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Inter:wght@400;700;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="header">
        <div class="logo">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
                <rect x="3" y="3" width="7" height="7"></rect>
                <rect x="14" y="3" width="7" height="7"></rect>
                <rect x="3" y="14" width="7" height="7"></rect>
                <rect x="14" y="14" width="7" height="7"></rect>
            </svg>
            <span>HEURISTICS GUIDE</span>
        </div>
        <div class="logo-separator"></div>
    </div>

    <div class="container">
        <div class="title-section">
            <div class="title-group">
                <h1>USABILITY</h1>
                <h2>Heuristics</h2>
            </div>
            <p class="intro">A curated guide to Jakob Nielsen's Usability Heuristics. These ten broad rules of thumb define the standard for human-computer interaction. Hover over each cell to explore the logic behind seamless user experiences.</p>
        </div>

        <div class="fisheye-container">
            <div class="fisheye-row">
                <div class="menu-item">
                    <div class="background-number">01.</div>
                    <div class="content">
                        <div class="pill">UH#01</div>
                        <div class="collapsed-label">UH#01</div>
                        <h3 class="title">VISIBILITY OF SYSTEM STATUS</h3>
                        <p class="description">The design should always keep users informed about what is going on through appropriate feedback within a reasonable time.</p>
                        <div class="subtitle">VISIBILITY OF SYSTEM STATUS</div>
                    </div>
                </div>
                <div class="menu-item">
                    <div class="background-number">02.</div>
                    <div class="content">
                        <div class="pill">UH#02</div>
                        <div class="collapsed-label">UH#02</div>
                        <h3 class="title">MATCH BETWEEN SYSTEM & WORLD</h3>
                        <p class="description">The design should speak the users' language. Use words, phrases, and concepts familiar to the user, rather than internal jargon.</p>
                        <div class="subtitle">MATCH BETWEEN SYSTEMS AND REAL WORLD</div>
                    </div>
                </div>
                <div class="menu-item">
                    <div class="background-number">03.</div>
                    <div class="content">
                        <div class="pill">UH#03</div>
                        <div class="collapsed-label">UH#03</div>
                        <h3 class="title">USER CONTROL & FREEDOM</h3>
                        <p class="description">Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state.</p>
                        <div class="subtitle">USER CONTROL AND FREEDOM</div>
                    </div>
                </div>
                <div class="menu-item">
                    <div class="background-number">04.</div>
                    <div class="content">
                        <div class="pill">UH#04</div>
                        <div class="collapsed-label">UH#04</div>
                        <h3 class="title">CONSISTENCY & STANDARDS</h3>
                        <p class="description">Users should not have to wonder whether different words, situations, or actions mean the same thing.</p>
                        <div class="subtitle">CONSISTENCY AND STANDARDS</div>
                    </div>
                </div>
                <div class="menu-item">
                    <div class="background-number">05.</div>
                    <div class="content">
                        <div class="pill">UH#05</div>
                        <div class="collapsed-label">UH#05</div>
                        <h3 class="title">ERROR PREVENTION</h3>
                        <p class="description">Even better than good error messages is a careful design which prevents a problem from occurring in the first place.</p>
                        <div class="subtitle">ERROR PREVENTION</div>
                    </div>
                </div>
            </div>

            <div class="fisheye-row">
                <div class="menu-item">
                    <div class="background-number">06.</div>
                    <div class="content">
                        <div class="pill">UH#06</div>
                        <div class="collapsed-label">UH#06</div>
                        <h3 class="title">RECOGNITION RATHER THAN RECALL</h3>
                        <p class="description">Make objects, actions, and options visible. The user should not have to remember information from one part to another.</p>
                        <div class="subtitle">RECOGNITION RATHER THAN RECALL</div>
                    </div>
                </div>
                <div class="menu-item">
                    <div class="background-number">07.</div>
                    <div class="content">
                        <div class="pill">UH#07</div>
                        <div class="collapsed-label">UH#07</div>
                        <h3 class="title">FLEXIBILITY & EFFICIENCY</h3>
                        <p class="description">Accelerators — unseen by the novice user — may often speed up the interaction for the expert user.</p>
                        <div class="subtitle">FLEXIBILITY AND EFFICIENCY OF USE</div>
                    </div>
                </div>
                <div class="menu-item">
                    <div class="background-number">08.</div>
                    <div class="content">
                        <div class="pill">UH#08</div>
                        <div class="collapsed-label">UH#08</div>
                        <h3 class="title">AESTHETIC DESIGN</h3>
                        <p class="description">Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit competes with relevant units.</p>
                        <div class="subtitle">AESTHETIC AND MINIMALISTIC DESIGN</div>
                    </div>
                </div>
                <div class="menu-item">
                    <div class="background-number">09.</div>
                    <div class="content">
                        <div class="pill">UH#09</div>
                        <div class="collapsed-label">UH#09</div>
                        <h3 class="title">RECOGNIZE & RECOVER</h3>
                        <p class="description">Error messages should be expressed in plain language, precisely indicate the problem, and suggest a solution.</p>
                        <div class="subtitle">HELP USERS RECOGNIZE AND RECOVER</div>
                    </div>
                </div>
                <div class="menu-item">
                    <div class="background-number">10.</div>
                    <div class="content">
                        <div class="pill">UH#10</div>
                        <div class="collapsed-label">UH#10</div>
                        <h3 class="title">HELP & DOCUMENTATION</h3>
                        <p class="description">Even though it is better if the system can be used without documentation, it may be necessary to provide help.</p>
                        <div class="subtitle">HELP AND DOCUMENTATION</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer>
        Peaches Njenga &bull; Sandrah Lewa &bull; Ian Dancun &bull; Javan Otieno &bull; Daniel Karume
    </footer>
</body>
</html>