usabilityeval/visibility.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
<!DOCTYPE html>
<html lang="en">

<head>

    <!-- 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
                    }
                }
            });
            $("selector").fancybox({
                arrows : false
            });
        });
    </script>

    <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">

</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; background-color: #D3D3D3;">
                    <a href="visibility.html">Visibility</a>
                </li>
                <li style="padding-left: 30px;">
                    <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>Visibility of system status</h1>
                        <p>The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.</p>
                    </div>
                </div>

                <div class="row" id="overview">
                    <div class="col-md-4">
                    <a class="fancybox" href="./img/1_1.png"><img src="./img/1_1.png" alt="img 1" /></a>
                        </div>
                        <div class="col-md-8">
                            <p>Navigation efficiency throughout the site becomes increasing difficult with the single footer bar containing the main links redirecting visitors to the other repositories of the site. An added navigation bar at the top of the page -possibly a fixed header bar- would help users attend to their destinations within a shorter period of time (approximately within the 3 second window), as it is conventional for navigation bars to be placed either on the side of the page or on the top of the page. It is unusual for a page to have their navigation bar in the middle. Though it is not so unusual to place a navigation bar in the footer, it is not conventional to have the footer be a primary navigation tool.</p>
                        </div>
                    </div>

                    <div class="row" id="overview">
                        <div class="col-md-4">
                            <a class="fancybox" href="./img/1_2.png"><img src="./img/1_2.png" alt="img 2" /></a>
                        </div>
                        <div class="col-md-8">
                            <p>Visual organization of the system is not only inconsistent, but also hard to recognize and associate with the rest of the body of information available on the website. The adjacent pages of the system including, but not limited to: “University A-Z”, “Job Vacancies”, and “News & Events” are good references of the contrasting visual themes within the system.</p>
                            <p>Key Examples:</p>
                            <a href="http://www2.le.ac.uk/research/current-research">Current Research</a>
                            <br/>
                            <a href="http://www2.le.ac.uk/students?uol_r=763d5396">Students</a>
                        </div>
                    </div>

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

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

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

    </body>

    </html>