“Usability is the ease of use of a human-made object.”
“Usability is a quality attribute that assesses how easy user interfaces are to use.”
Several problems here:
“I have a few qualms with this app:
1. For a Linux user, you can already build such a system yourself quite trivially by getting an FTP account, mounting it locally with curlftpfs, and then using SVN or CVS on the mounted filesystem. From Windows or Mac, this FTP account could be accessed through built-in software.”
“If a website is difficult to use, people leave. If the homepage fails to clearly state what a company offers and what users can do on the site, people leave. If users get lost on a website, they leave.If a website's information is hard to read or doesn't answer users' key questions, they leave. Note a pattern here? There's no such thing as a user reading a website manual or otherwise spending much time trying to figure out an interface. There are plenty of other websites available; leaving is the first line of defense when users encounter a difficulty. ”
…who are a lot like you
…who are not like you
NO!
Users are not designers
“If I had asked my customers what they wanted they would have said faster horses”
Henry Ford (probably not)
It's not the customer's job to know what they want
Steve Jobs
In a study conducted in the 50s, people were asked if they’d prefer lighter telephone handsets. On average, they said they were happy with the handsets they had (which at the time were made heavy for durability).
Yet an actual test of handsets, identical except for weight, revealed that people preferred the handsets that were about half the weight that was normal at the time.
Source: Klemmer, Ergonomics, Ablex, 1989, pp 197-201
When Google surveys users about how many search results they want per page (10, 20, 30), they overwhelmingly say “30 results”.
But when Google actually deploys 30-result search pages as part of an “A/B test”, usage drops by 20% relative to the conventional 10-result page.
Is it easy to learn?
Once learned, is it fast to use?
Are errors few and recoverable?
The property we’re concerned with here, usability, is more precise than just how “good” the system is. A system can be good or bad in many ways.
If important requirements are unsatisfied by the system, that’s probably a deficiency in functionality, not in usability.
If the system is very expensive or crashes frequently, those problems certainly detract from the user’s experience, but we don’t need user testing to tell us that.
More narrowly defined, usability measures how well users can use the system’s functionality. Usability has several dimensions: learnability, efficiency, and safety.
These aren’t the only aspects of a user interface that you might care about (for example, subjective feelings are important too, as is fatigue), but these are the primary ones we’ll care about in this class.
Notice that we can quantify all these measures of usability. Just as we can say algorithm X is faster than algorithm Y on some workload, we can say that interface X is more learnable, or more efficient, or more safe than interface Y for some set of tasks and some class of users, by designing an experiment that measures the two interfaces.
The usability dimensions are not uniformly important for all classes of users, or for all applications. That’s one reason why it’s important to understand your users, so that you know what you should optimize for. A web site used only once by millions of people–e.g., the national telephone do-not-call registry–has such a strong need for ease of learning, in fact zero learning, that it far outweighs other concerns. A stock trading program used on a daily basis by expert traders, for whom lost seconds translate to lost dollars, must put efficiency above all else.
But users can’t be simply classified as novices or experts, either. For some applications (like stock trading), your users may be domain experts, deeply knowledgeable about the stock market, and yet still be novices at your particular application. Even users with long experience using an application may be novices or infrequent users when it comes to some of its features.
Computers connected to
the Web
are either
clients or servers
$ python -m SimpleHTTPServerServing HTTP on 0.0.0.0 port 8000 ...
GET /hello.html HTTP/1.1
User-Agent: Mozilla/5.0 Firefox/71.0
Host: haystack.csail.mit.edu
Accept-Language: en-us
Accept-Encoding: gzip, deflate
Connection: Keep-Alive
HTTP/1.1 200 OK
Date: Sun, 29 Dec 2019 17:46:48 GMT
Server: Apache/2.4.7 (Ubuntu)
Last-Modified: Wed, 15 Nov 2017 21:16:50 GMT
Content-Length: 6471
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html
<!DOCTYPE html>
<title>Hello world</title>
<p>Hello <em>world</em> 👋
“What does it mean?”
“How does it look?”
“What does it do?”
Hello <em>world</em> 👋
Hello <em>world</em> 👋
html, head, and body elements, the browser will do it for us.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello world</title>
</head>
<body>
<p>Hello <em>world</em> 👋</p>
</body>
</html>
lang (language) attribute is not strictly required, but is a good practice as a lot of other Web Platform features use it (e.g. CSS hyphenation)
...
<body>
<p>Hello <em>world</em> 👋</p>
<footer>©<?= date("Y"); ?><footer>
</body>
</html>
...
<body>
<p>Hello <em>world</em> 👋</p>
<footer>©2020<footer>
</body>
</html>
Hello <a href="https://google.com">world</a>
<img src="img/baby-yoda.jpg">
<img src="img/baby-yoda.jpg" />
<input type="checkbox" checked>
<input type="checkbox" checked="checked">
<input type="checkbox" checked="false">
Hello<br>world
| CSS | <link href="presentation.css" rel="stylesheet"> |
| JS | <script src="behavior.js"></script> |
| Media files | <img src="baby-yoda.jpg" alt="Description"> |
| …even other HTML files! | <iframe src="otherpage.html"></iframe> |
Hierarchy, navigation, meaning, content are HTML's domain
Typography, colors, layout, visual effects, animation are CSS' domain
h1 {
font-size: 200%;
color: white;
}
h1 headings.
This is called an element selector because it styles all elements of a certain type.
There are other types of selectors that style elements based on many other criteria.
CSS selectors are an entire mini-language for targeting HTML elements and can get quite complex.
Even though they started in CSS, they are now used across the entire web platform.
color which sets the text color, and font-size which sets the font size, in this case relative to the containing element's font size.
<script>
console.log("Hello world 👋", new Date());
</script>
h1, script, style). What happens?