Basic rules of interface design for computers and mobile devices

žRemember these are guidelines not absolute laws. They are meant to be broken at the right times. Usually when they are broken though, it is at the wrong times because people do not understand how to apply them.
ž
Divine Proportion – that when creating a web page, the content and sidebar should have an proportion of 1.618

Example:
ž
Rule of thirds – We should place objects along the lines and points along the thirds as shown in the image:

ž
Golden rectangle – related to the divine proportion (just applying the concept) into a perfect shape. “The ratio, called the Golden Ratio, is the ratio of the length to the width of what is said to be one of the most aesthetically pleasing rectangular shapes. This rectangle, called the Golden Rectangle, appears in nature and is used by humans in both art and architecture. The Golden Ratio can be noticed in the way trees grow, in the proportions of both human and animal bodies, and in the frequency of rabbit births. “

ž
Grids – Essentially the most basic form of design for interfaces. We layout a page in a grid. It is of extreme importance to plan out this grid before starting development so that your CSS is correct.

Fitt’s Law – While Fitt’s law looks confusing at first as presented in the image below it is actually quite simple. Essentially it means that the less distance between links/buttons etc that need to be pressed in order, the more usable the page is. Additionally, the bigger the buttons are, the less chance there is of user error.

File sizes and download speeds of 56k, 3G, 4G, and High speed wireless internet

Here is a chart I made comparing speeds of various internet connections and showing how fast/slow one would expect their files to download. Remember that these are really hypothetical and depend so much on where you are, what kind of device you have, etc. Theoretically 4G and high speed internet should be nearly the same but realistically this is not the case. So please do not take these as fact, rather, use this chart as a guide to consider when developing for both web and mobile devices.

100kb 250kb 500kb 1mb 1gb
56k Modem 15 seconds 36 seconds 1 minute 2.5 minutes 1 day 18 hours
3G <1 second 6 seconds 12 seconds 25 seconds 7 hours
High Speed/Wireless/4G <1 second 1 second 3 seconds 5 seconds 1.5 hours

*note – these speeds assume best case scenario. More than likely all speeds will be
Slower. Both 3G and 4G speeds will probably be significantly slower, especially as 4G max
Speeds are not even available yet.

What is usability?

If I had to describe HCI is one word, it would be usability. Usability refers to the ease of use for the software/hardware.

So what is usability? Usability asks if the product, webpage, etc. is effective, efficient, and user friendly. Were the goals met? Are the users satisfied? Was cognitive load reduced where possible? Error free experience? Comfortable environment?

Thus usability is extremely important when designing anything. So how do you test usability? Well there are many types of tests that can be performed from experts evals, groups, users, etc. There are also many types of guideline charts out there in the research depending on what type of material you are testing (i.e., a webpage, mobile app, control scheme, etc.).

What is Human Computer Interaction – HCI

What is HCI?

“Human-Computer Interaction (HCI) is the study and the practice of usability. It is about understanding and creating software and other technology that people will want to use, and will find effective when used. The concept of usability, and the methods and tools to encourage it, achieve it, and measure it are now touchstones in the culture of computing” – Carroll (2002)

HCI is how we interact with computer hardware and software. Not just computer though, but all machines – such as your car, dishwasher, airplane etc. The point of HCI is to make these technologies more ‘user friendly’ so that they are easier for us to interact with both physically and mentally. The key to HCI being usability – so expect more blog posts on usability.

Can a computer detect cognitive load? The latest in HCI

Well this is very interesting. This computer system can determine when a persons brain activity is being overloaded and in return adjust the computer interface to take that load off of the user. While I am not sure this works (need to see this research peer reviewed and read it), I am very intrigued by the possibilities and promise this holds in both the cognitive load and human computer interaction research.

“Their system, called Brainput, is designed to recognize when a person’s workload is excessive and then automatically modify a computer interface to make it easier. The researchers used a lightweight, portable brain monitoring technology, called functional near-infrared spectroscopy (fNIRS), that determines when a person is multitasking. Analysis of the brain scan data was then fed into a system that adjusted the user’s workload at those times. A computing system with Brainput could, in other words, learn to give you a break.”

More of the article here: http://mashable.com/2012/05/14/brainput/