usabilityeval/errorprevention.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
<!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
                    }
                }
            });
        });
    </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;">
                    <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; background-color: #D3D3D3;">
                    <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>Error Prevention </h1>
                        <p>Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.</p>
                    </div>
                </div>

                <div class="row" id="overview">
                    <div class="col-md-4">
                            <a class="fancybox" href="./img/5_1.png"><img src="./img/5_1.png" alt="img 1" /></a>
                    </div>
                    <div class="col-md-8">
                        <p>The website incorporates elements of intuitive user behaviors to dodge and avoid potential errors common to users, web programmers, and news sources alike. The system includes within its domain additional addresses that could otherwise potentially lead users to an error due to obsolete locations or web incompatibility. Common repositories that might suggest a certain location in the system (such as the first key example), but in fact are actually inactive are kept as live addresses and serve as an efficient method of redirection of user traffic. The second key example demonstrates a great case of error prevention by the system in the manner it was able to address human error and account for typos by incorporating increased intuition in address localities. The system adapts from the misspelled link an intuitive suggestion for a possible destination of the user -- a “/hi” extension resembles the shortcut or typo to the “/history” address -- and avoids potential abruptions to an otherwise pleasant experience. The system provides the website through a thoughtful presentation considering the agile multi-platform compatibility allowing even mobile users ease of access to popular pages. On the other hand, the search bar does not prevent blank queries, and simply shows an empty page that does not notify the user what is wrong. Some form of prevention (such as a pop-up saying no empty searches) would help this problem.</p>
                        <p>Key Examples:<br/>
                            <a href="http://www.le.ac.uk/hi">http://www.le.ac.uk/hi</a><br/>
                            <a href="http://www.le.ac.uk/history">http://www.le.ac.uk/history</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!-- /#page-content-wrapper -->

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

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

</body>

</html>