Saturday 31 January 2015

Ethan Marcotte - Responsive Web Design

fig 1.1: The canvas, even a blank one, provides a boundary for an artist’s work. (Photo by Cara StHilaire: http://bkaprt.com/rwd/2/)3

"Of course, web designers have been grappling with this for some time. In fact, our profession has never had an “artifact” of its own. At the end of the day, there isn’t any thing produced by designing for the web, no tangible objects to hold, to cherish, to pass along to our children. But despite the oh-so-ethereal nature of our work, the vocabulary we use to talk about it is anything but: “masthead,” “whitespace,” “leading,” even the much-derided “fold.” Each of those words is directly inherited from print design: just taken down from the shelf, dusted off, and re-applied to our new, digital medium.

Some of that recycling is perfectly natural. We’re creatures of habit, after all: as soon as we move into a new city, or start a new job, we’re mapping previous experiences onto the new, more foreign one, using them to gradually orient ourselves. And since the web is a young medium, it’s only natural to borrow some terms from what we know: graphic design provides us with a rich history that spans centuries, and we’d be remiss not to use its language to help shape our industry.

But our debt to print goes much deeper than language. In fact, there’s another concept we’ve borrowed, one we might not acknowledge all that often: the canvas (fig 1.1).

In every other creative medium, the artist begins her work by selecting a canvas. A painter chooses a sheet of paper or fabric to work on; a sculptor might select a block of stone from a quarry. Regardless of the medium, choosing a canvas is a powerful, creative act: before the first brush stroke, before striking the chisel, the canvas gives the art a dimension and shape, a width and a height, establishing a boundary for the work yet to come. 

On the web, we try to mimic this process. We even call it the same thing: we create a “canvas” in our favorite image editor, a blank document with a width and height, with dimension and shape. The problem with this approach is that we’re one step removed from our actual canvas: the browser window, and all of its inconsistencies and imperfections "




"...in recent years, a relatively new design discipline called “responsive architecture” has been challenging some of the permanence at the heart of the architectural discipline. It’s a very young discipline, but this more interactive form has already manifested itself in several interesting ways.

Artists have experimented with surfaces that react to your voice with a music of their own (http://bkaprt.com/rwd/5/), and with living spaces that can reform themselves to better fit their occupants (http://bkaprt.com/rwd/6/). One company has produced “smart glass technology” that can become opaque once a room’s occupants reaches a certain density threshold, affording them an additional layer of privacy (fig 1.5). And by combining tensile materials and embedded robotics, a German design consultancy has created a “wall” that can bend and flex as people approach it, potentially creating more or less space as the size of the crowd requires (fig 1.6).

Rather than creating spaces that influence the behavior of people that pass through them, responsive designers are investigating ways for a piece of architecture and its inhabitants to mutually influence and inform each other."



This was his major influence when thinking about responsive design.


"...web designers, facing a changing landscape of new devices and contexts, are now forced to overcome the constraints we’ve imposed on the web’s innate flexibility.

We need to let go.

Rather than creating disconnected designs, each tailored to a particular device or browser, we should instead treat them as facets of the same experience. In other words, we can craft sites that are not only more flexible, but that can adapt to the media that renders them.

In short, we need to practice responsive web design. We can embrace the flexibility inherent to the web, without surrendering the control we require as designers. All by embedding standards-based technologies in our work, and by making a slight change in our philosophy toward online design."

Friday 16 January 2015

Reference Notes

Graphic Design Theory

Pg 57 "solutions must respond to specific human motives and activities, conditions, and settings that may be viewed at a variety of scales or perspectives"

"While the nature of the context is beyond the designer immediate control, a primary design responsibility is to determine which factors, and how many factors, within that context the design will address."

"When it is not possible for a design to reconcile the inevitable array of competing priorities, we must decide to value some things as more important than others."


Look at the principles of gestalt psychology : Priciple of proximity, Principle of similarity, Principal of good communication, Principle of closure.

Pg 212

Thorburn and Jenkins - rethinking media change....

..." Suggest that periods of change are usually accomanied by heightened reflection as the new culture comes to grips with the challenges and opportunities introduced by new technology."

Pg 213

In contrast, emerging technologies also carry the burden of past assumptions and practices.

In the early days of he web, screen-based communication looked much like that of print... Unfortunately, much of this approach still remains in many commercial sites.

Pg 214

"Historically, graphic design practice has often focused on constructing visual representations of subject matter (text and image) in books and on signs and screens. In other words, it has focussed on the communicative arrangement of form in the space defined by physical artefacts. But new technologies shift our attention from the arrangement of content to the facilitation of behaviours and mediation of experiences in the environment itself, often without the users' conscious awareness of the mediation"

Geometrix

  Pictures on phone




























Friday 2 January 2015

Reference Notes

Chapter 1 Don't Make Me Think 

Pg11
When looking at a web page "...it should be self-evident. Obvious. Self explanatory.

Pg19
Using a site that doesn't make us think about unimportant things feels effortless, whereas puzzling over things that don't matter to us tends to sap or energy and enthusiasm - and time.

He basically saying when he looks at a really well designed website, where information is accessible and the message is built-in, that he doesn't have to think and can therefore enjoy the time he spends there. This contrasts a poorly designed websites where the goal of the user becomes just to understand how to it works and what it's function is, this "thinking", at best, distracts the user from the design, at worst, alienates the user from the design.

Chapter 2 How we really use the Web

"Rule #1 - We don't read pages. We scan them." Pg 22

Why?

"We're usually in a hurry" - We're motivated to save time and energy.

"We know we don't need to understand everything" - only a fraction of the information matters to us, there for this is what we scan for

"We're good at it."- we have been scanning things like magazines and newspapers all our lives, we know it works.


"Rule #2 - We don't make optimal choices. We satisfice*." Pg 24
(*Satisfice - a cross between satisfying and sufficing.)

Why?

"We're usually in a hurry" - making an optimal choice is hard and takes more time.

"There is not much of a penalty for guessing wrong" - the user can go back if they choose wrong ( in fact... the back button is the most used feature of Web Browsers)

"Weighing options may not improve our chances" - a lot of poorly designed sites exist where nothing makes sense and it is often easier taking a quick chance and just using the back button if you've got it wrong.

"Guessing is more fun" - if you guess right, it's faster and introduces a element of chance


"Rule #3 - We don't figure out how things work. We muddle through." Pg 26

Why?
"It's not important to us" - most people don't need to understand things as long as they can use them to there own ends

"If we find something that works, we stick to it." - once we find something that works for us, no matter how badly, we are unlikely to try and find an alternate way unless we stumble across it.

Chapter 3 - Billboard Design 101

This is important knowledge because now we get an idea that our messages have to be clear, consider and directed. Following this, he gives a list of things to do to make sure that the user sees and understand the site as much as possible (pg31)

Create a clear visual hierarchy on each page
Take advantage of users existing knowledge and the conventions they already know
Order pages into clear divided section
Make any user interaction obvious; navigation, links, buttons etc
Focus attention by minimising any unnecessary noise, less is more

He goes on to say that "there is nothing new about visual hierarchies. Every newspaper page, for instance, uses prominence, grouping, and nesting to give us useful information about the content of the page before we read the words." Pg32 

Para phrasing "We all parse visual hierarchy, we do it automatically, the only time we are aware of it is when we are forced to think about it due to the absence of the visual cues."
Pg 33

The book talks about convention and that these pre-existing cues for people should be used not ignored. He adds that; designer usually, wrongly, assume that they are hired to create something new and exiting but when doing so they focusing on design too much and they should realise that the aim is to focus the user on the content. 
(NTS: Don't reinvent the wheel just for the sake of it, you can still design something great just use these conventions to your advantage and don't get hung up on it being something no one has ever seen before, that would be working against you)

Chapter 4 - Animal, vegetable or mineral?

This chapter discusses click-throughs. There is a general consensus that there should be a limited amount of click through a, however, he argues that it is not how many click there are it is how often you are required to engage your brain. If the click are easy, obvious choices, leading you directly to what you want then it's a choice that take little time to consider. Keep the clicks mindless.

Chapter 5 - Omit needless word

Kruger third law of usability "get rid of half the words on each page, then get rid of half of whats left" pg 45

The reasons for this are simple; it reduces the noise of the page, it makes relevant content more prominent and it makes the page digestible at a glance.

"Happy talk must die" pg 46
(*happy talk - content that serves no purpose except to enclave the ego of the writer, eg welcome text)

"Instruction must die" pg 47
Basically acknowledging that people have good instincts about the web so a lot of the time it is unnecessary to tell them how to suck eggs

If you remove these two forms of conversation you get much more efficient copy.

Chapter 6 - Street Signs and Breadcrumbs 

This chapter discusses user psychology and the transition from real world thinking to digital world thinking in regard to finding your way around a website. He raise the similarities between wandering round a mall looking for a product and using a website in the same way. In both there are paths and directions you take and you know to take these from signs and asking for help. This works the same way online by way of navigation and search engines.

Navigation

He talks about the hierarchy of navigation the same way you use shop signs:

Mall sign
Shop sign
Isle sign
Shelf sign
Products
Product name
Till

Equates to:

Website name
Navigation Bar
Category
Sub sub category
Product list
Product name
Checkout

Consumers use this type of thinking to find what they are looking for. If they can't find what they are looking because something in the chain doesn't make sense or is missing for they get frustrated. 

Search

Search is just like asking a shop assistant for help and getting them to take you straight to the product.

Users use these two methods of searching in three ways; stubborn nav searching, straight to the search engine or a mixture of the two. If any of these ways of searching isn't finding what your looking for you have the back up of the other. However, if both fail the user will leave.

He mentions that there are key differences from the real world:

There's no sense of scale - we have no idea how big the site is, whether it's a 10 page site or a 1000 page site. You've no idea what's on the next page.
No sense of direction - there is no concept of up and down left and right, this means we are unaware of where we are. 
No sense of location - we cannot get a sense of our surrounding, for example without bookmarks it would be very difficult to take shortcuts come back to something you were looking at.

Due to the lack of orientation two things become very important, homepage because it is a fixed point and the back button allowing us to quickly retrace our steps.

However, because there is no sense of physical space, getting from one place to another requires little to no effort and therefore has no consequences. This makes searching significantly easier to do for longer.

In this regard, there are some overlooked benefits of navigation:

It gives us something to hold on to and allows us a fixed point to go back to.
It reveals content, giving us an idea of what we can expect to find on the site
It gives us a starting point and tells us how to use a site
If done well, it creates a good impression allowing the user to feel confident about browsing and potentially