usabilityeval/match.html at master · pending/usabilityeval · 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
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Usability Evaluation - Visibility</title>

    <!-- Custom CSS -->
    <link href="css/simple-sidebar.css" rel="stylesheet" type="text/css">

    <!-- Bootstrap Core CSS -->
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css">

    <!-- Add jQuery library -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

    <!-- Add fancyBox -->
    <link rel="stylesheet" href="./fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen">
    <script type="text/javascript" src="./fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

    <!-- Optionally add helpers - button, thumbnail and/or media -->
    <link rel="stylesheet" href="./fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen">
    <script type="text/javascript" src="./fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
    <script type="text/javascript" src="./fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>

    <link rel="stylesheet" href="./fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen">
    <script type="text/javascript" src="./fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $(".fancybox").fancybox({
                closeClick  : true,
                helpers : {
                    title: {
                        type: 'inside'
                    },
                    overlay : {
                        locked: false
                    }
                }
            });
        });
    </script>

</head>

<body>

    <div id="wrapper">

        <!-- Sidebar -->
        <div id="sidebar-wrapper" style="background-color: #E8E8E8;">
            <ul class="sidebar-nav">
                <li class="sidebar-brand">
                    <a href="index.html">
                        <img src="University_of_Leicester.png" alt="logo" />
                    </a>
                </li>
                <li>
                    <a href="index.html">Home</a>
                </li>

                <li><a href="nielsen.html">Nielsen's Heuristics</a>
                </li>
                <li style="padding-left: 30px;">
                    <a href="visibility.html">Visibility</a>
                </li>
                <li style="padding-left: 30px; background-color: #D3D3D3;">
                    <a href="match.html">Match</a>
                </li>
                <li style="padding-left: 30px;">
                    <a href="usercontrol.html">User Control</a>
                </li>
                <li style="padding-left: 30px;">
                    <a href="errorprevention.html">Error Prevention</a>
                </li>
                <li style="padding-left: 30px;">
                    <a href="consistency.html">Consistency</a>
                </li>
                <li style="padding-left: 30px;">
                    <a href="recognition.html">Recognition</a>
                </li>
                <li style="padding-left: 30px;">
                    <a href="efficiency.html">Efficiency</a>
                </li>
                <li style="padding-left: 30px;">
                    <a href="aesthetics.html">Aesthetics</a>
                </li>
                <li style="padding-left: 30px;">
                    <a href="errorrecovery.html">Error Recovery</a>
                </li>
                <li style="padding-left: 30px;">
                    <a href="documentation.html">Documentation</a>
                </li>
            </ul>
        </div>
        <!-- /#sidebar-wrapper -->

        <!-- Page Content -->
        <div id="page-content-wrapper">
            <div class="container-fluid">
                <div class="row" id="nielsen">
                    <div class="col-lg-12">
                        <h1>Match between System and the Real World</h1>
                        <p>"The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order." - Neilsen"
                        </p>
                    </div>
                </div>

                <div class="row" id="overview">
                    <div class="col-md-4">
                        <a class="fancybox" href="./img/2_1.png"><img src="./img/2_1.png" alt="img 1"/></a>
                    </div>
                    <div class="col-md-8">
                        <p>Most the wording on the University of Leicester website are user-friendly, using terms such as “Site Visitors”, “Staff & Students”, “Maps and Directions”. These are conventional terms used at most academic school websites. However, the word “prospectus”, used front and center on the homepage is not explained even when you click on the link. After some quick searching in the dictionary, it is clear that it is a catalogue about the school, but it is not a common term used in the US (though it may be in the UK).
                        </p>
                    </div>
                </div>

                <div class="row" id="overview">
                    <div class="col-md-4">
                        <a class="fancybox" href="./img/2_3.png"><img src="./img/2_3.png" alt="img 2"/></a>
                    </div>
                    <div class="col-md-8">
                        <p>All of the sub-navigation bars within each section is also full of user-friendly terms that are common and easy to understand. The short header above each these sections also allows users to quickly glance at what the following links are about without having to read all of them.
                            Much of the information however does not show up in a natural and logical order when you go to that section. For example, in research (http://www.le.ac.uk/research/), it would be logical to place “Current Research” before “Our Global Challenges” because even though it may be important to know about the challenges they are facing, the reason people would click on Research to begin with would most likely be because they wanted to know about research at the university.
                        </p>
                    </div>
                </div>

                <div class="row" id="overview">
                    <div class="col-md-4">
                        <a class="fancybox" href="./img/2_2.png"><img src="./img/2_2.png" alt=""></a>
                    </div>
                    <div class="col-md-8">
                        <p>Another example would be in the Blackboard site (https://blackboard.le.ac.uk/), in which the log-in form is not on the middle-left, where users usually look first. Although there could be good questions asked, it makes sense that most people who are visiting this site are going to immediately log in first.

                        </p>
                    </div>
                </div>

            </div>
        </div>
        <!-- /#page-content-wrapper -->

    </div>
    <!-- /#wrapper -->

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

</body>

</html>