The basics of screens and images

Three things are enough: consistency, feedback and preventing errors.

• Consistency … the same thing is in the same place on every screen. If the save button moves from bottom right to top left to the middle, you hunt for it every time
• Feedback … always answer when something is operated. A progress bar or a "saved" message is this
• Preventing errors … make it impossible to go wrong in the first place, as by picking a date from a calendar instead of typing it

What makes them confusing is that all three are "for ease of use", so you pick a description of feedback when consistency was asked about. How to separate them comes later in the exercises.

Another principle is not choosing between users. The same screen is used by first-timers and by people who use it every day.

A first-timer wants operations they can understand without memorising: picking from a list, pressing a labelled button — operations they can see.

An everyday user wants speed. Finishing with a shortcut key is quicker than picking each time.

Asking which to take is where it goes wrong. The answer is providing both. Attach both a mouse route and a keyboard route to the same operation and either kind of person can work their own way. Any proposal leaning to one side is discarding the other.

Putting a form together, you have wondered whether to use <input type="radio"> or <select>. There are rules for choosing.

• Radio button … pick exactly one from mutually exclusive choices. For when the choices are few and you want them all visible
• Checkbox … decide on or off for each item, so any number can be selected
• Pull-down menu (dropdown) … for when the choices are fixed in advance and somewhat numerous. It folds away, so it takes little space
• Pop-up … for when you want to halt the current operation and show a confirmation or a warning

There are two axes for telling them apart: one or several (radio versus checkbox), and all visible or folded away (radio versus pull-down).

There is one more condition for a pull-down: all the choices must be writable out in advance. Five product categories can be listed, but a freely written product name, or a product number newly assigned per product, will never make a list. A wide numeric range like "10,000 to 100,000 yen" would run to over ninety thousand entries.

Similar words, different things. Mix them and the exam will get you.

• Usability … how far a person can achieve their goal without stress. The JIS definition puts it as the degree of effectiveness, efficiency and user satisfaction
• Accessibility … that people with disabilities and older people can use it without impediment. The question of getting in at all
• Universal design … designing from the start so that anybody can use it regardless of age, sex, nationality or disability

Thinking of them in order helps. Accessibility is "can use", usability is "can use comfortably". Satisfy being usable first, then work on the comfort.

You may have thought the alt in <img src="cat.jpg" alt="A cat asleep by the window"> was a tiresome rule. It is words for people who cannot see the image.

Screen reader software cannot read the image itself. All it reads out is the text in alt. So if alt is empty or says alt="image", that person will never learn what is there. This is at the centre of web accessibility.

There is another principle: do not rely on colour alone. "Required fields are shown in red" does not reach someone who sees colour differently. Always add a cue other than colour, such as an asterisk or the word "required".

Think now of that form of yours that marked errors with nothing but a red border.

The numbers given to products and employees are codes. They look like something you can assign carelessly, but they are a design subject too.

• Sequential code … just 1, 2, 3 in order. Easy to make, but the number tells you nothing about the contents
• Block code … meaning is divided by ranges of digits, as in "the 100s are stationery and the 200s are food"
• Mnemonic code … uses characters with meaning, like TV-32, readable at a glance
• Code with a check digit … one checking digit added at the end

The last is the interesting one. A digit is produced from the others by a fixed calculation and stuck on the end. Run the same calculation on the code as read and, if it does not agree, you know it was mistyped.

Now the material. Knowing how an image is held ties together every reason for choosing a format.

An image is small dots laid out in rows. One dot is a pixel. Resolution is the fineness of the dots, given either as the count across and down, like 1000x800, or as dpi (dots per inch).

How many levels of intensity one pixel can hold is the gradation, decided by the bit count. Eight bits gives 2 to the 8th = 256 levels.

The number of colours works the same way. Eight bits each for red, green and blue makes 24 bits, expressing 2 to the 24th = about 16.78 million colours. That is what the six digits of #ff0000 mean, and it is what full colour is.

This RGB is adding light (additive mixing). Stronger is brighter, and all three at full is white. #000000 is black because nothing lit is black. Screen colour is this one.

Printing is the reverse, using the subtracting of ink of CMYK (subtractive mixing). Layering cyan, magenta and yellow gets darker, approaching black (an unsatisfying black, so a separate black ink K is kept). That is why a colour seen on screen will not come out the same in print.

The size of an image is the pixel count times the bits per pixel. That is all.

An image of 1,000x800 dots in 65,536 colours: 65,536 is 2 to the 16th, so one pixel is 16 bits = 2 bytes. There are 1000 x 800 = 800,000 pixels. Multiplying gives 1,600,000 bytes, about 1.6M bytes.

For video you just multiply by the frames per second as well. Running 800x600 in 24-bit full colour at 30 frames a second gives 800 x 600 x 24 x 30, about 350 megabits per second.

The trap is mixing up bits and bytes. Asked "how many megabytes", divide by 8; asked "how many megabits per second", leave it. Get into the habit of reading the units first.

Now the main point. There are two kinds of compression, and that is the parting of the ways.

• Lossless compression … restores completely. PNG and GIF are these
• Lossy compression … does not restore. It gets smaller in exchange for throwing things away. JPEG is this

Recall the pages you built in HTML and CSS. The photograph laid behind the hero was .jpg and the logo and icons in the header were .png or .svg. Here is the reason for that split.

JPEG is the format for photographs and the international standard for still image compression coding. It throws away information the eye hardly notices, making photographs very small. But text and the edges of flat colour blur. That is why a logo saved as JPEG gets a dirty outline.

PNG is lossless, so outlines survive as they are. It handles transparency too, which suits icons laid over a background.

• GIF … up to 256 colours. Lossless, and simple animations are possible
• SVG … held as instructions for shapes rather than dots. It does not degrade when enlarged, so it is strong for logos and icons used at varying width
• BMP … essentially uncompressed. Honest but very large, and heavy for a page

The reason for "photographs as JPEG, icons as PNG" is one phrase: may it blur, or must the outline be kept?

Sound is properly a smooth wave and cannot become 0s and 1s as it is. It is brought down to digital in three steps.

1. Sampling … take the height of the wave at fixed intervals
2. Quantisation … round the taken values to a fixed number of levels
3. Encoding … turn the rounded values into strings of 0s and 1s

The order is always sampling, quantisation, encoding. How many times a second you take is the sampling frequency (44.1kHz means 44,100 times a second), and how many bits express one take is the quantisation bit count.

The size is another multiplication: sampling frequency x quantisation bits x seconds, doubled again for stereo.

For video the MPEG family is the standard, and within it H.264/MPEG-4 AVC is the video compression used in mobile broadcasting and internet delivery. Compressing audio alone is MP3.

Finally, the terms for drawing shapes. They usually appear as a bare name with "which is the description?"

• Anti-aliasing … makes the staircase jaggedness on diagonal lines less noticeable by putting intermediate colours in the boundary pixels
• Clipping … fixes the region to display and discards the outside
• Shading … puts shadow on a surface to make it look solid
• Rendering … turns data into the final image that can be drawn on screen
• Morphing … changes one shape smoothly into another
• Texture mapping … pastes an image of pattern or material onto the surface of an object

There are two kinds of drawing tool too. Paint software holds a picture as a collection of pixels (a bitmap), while draw software holds it as instructions such as start point, direction and length. That is why a draw picture does not degrade when enlarged — exactly the same thinking as SVG.

One more: a tool that assembles several kinds of material such as text, still images, video and audio along a scenario is authoring software. Learn the name to have somewhere to put it when it turns up among the choices.