2. The 5 Planes Model
Last session we looked at Functionality.
By now we have used our skills to work
out what we’re building and why we’re
building it.
This session will be looking how we’re
going to organise our information and
how our users will get to it.
3. The Structure Plane
Interaction Design is a software
development term for creating a structured
user experience.
Information Architecture is a way of
designing content so that users find what
they’re looking for.
4. Interaction Design
You need to design your system to
accommodate and respond to the needs
and demands of the person using it.
It is no longer acceptable to expect users to
adapt to your system.
5. Interaction Design
This is a huge subject area and beyond the
scope of this lecture.
Succinctly Interaction Design aims to make
systems intuitive to use. If a system is
intuitive then users can get on with
whatever they were trying to achieve
without concentrating on how to use your
system.
6. Ease of Use
It’s important to remember that people will
view your site simply as a part of the Web,
a destination they stop at.
There are fewer new users every day and
people have an expectation of how to use
Web sites.
9. Information Architecture
The word architecture is very important. In
the physical world we understand the
purpose and use of an environment from
clues within its structure.
10. Architecture and the wider
world.
Architecture is not simply about individual
buildings but where the buildings are
placed and how people get around.
If you were dropped in most UK towns, you
should be able to find the main shopping
street and the station very quickly.
11. Information Architecture
The structure of a website should be
designed in such a way that people can
find what they want quickly and without
fuss.
Information architecture is there to help
build the pathways in a manner that is
intuitive and second nature.
12. Site Map
The bottom line of what we are producing is a site map. The
map gives us a specific hierarchical understanding of the
site and where information will be placed within it.
The main aim is to produce a concrete diagram that is
accessible and understandable to as many people as
possible. For a large site, it is also a useful tool for splitting
the site into sections where it is possible to delegate
successive parts.
13. Top Down Approach
The site architecture
is constructed
according to site
objectives and user
needs.
Content
This creates an empty shell into which the content is fitted.
15. How many sections?
The number isn’t important, it needs to
make sense to a user.
You can measure the amount of steps to
complete a task or the amount of clicks,
but don’t waste people’s time.
18. Nodes and structures
A node: any group or piece of information.
Hierarchical structure.
Formalised and common.
Matrix structure, allows
users to traverse the
site along dimensions.
Useful for browsing by
colour or size.
19. Structures
Organic structure.
Good for exploring a set
of topics without obvious
relationships although it
can be confusing for
users.
Sequential
structure. Rare on
the web, more
suited to traditional
media such as
books.
20. Sections
The clothes shop. Home
Page.
Men Women Children
Tops Bottoms Outer
The most important factor to consider is the language you use. You need to
order your information in a way that seems natural to your user.
21. Formal Documentation
We use formal documentation because it’s structure is reasonably intuitive. It is a useful
method of explaining site structure to clients. With larger sites, it means that there is a
specific document detailing each page’s relationship with every other page allowing for
delegated development.
Notas do Editor
This is an opportunity to recover any aspects that people found difficult last session. Point out that we are moving from the scope section to the structure section of the diagram.
Explain that it is at this point where we cross over from the abstract into the concrete. We are beginning to consider what we are actually building and how it will be presented.
It is also important that students are not put off by the technical sounding names. This is about understanding people, how they work and the way they think.
In the old days, users were expected to learn how to use things. A user will get bored very quickly if they are expected to adapt to your site.
It is worth, at this point playing the interview from Steve Rogers from BBCi. The interview is included on the DVD which comes with Designing Interactions by Bill Moggridge. The interview is also available on the web page http://www.designinginteractions.com/interviews/SteveRogers although the images are small.
As the internet has become ubiquitous, there are more conventions. This means that students should avoid making overcomplicated anti-intuitive interfaces. There will be a deeper discussion on metaphor in the next session.
Discuss that it is important that students become aware of their own habits, trying to understand sites they use frequently and what they like about them or what they think could be improved. The main problem with good design is that one doesn’t notice it, it’s simply fit for purpose.
Students should have come across these errors in their use of the internet. Explain that although it is impossible to stop errors from happening, there is a better way to deal with them. Point out that this error message has no way out.
Different server technologies have different solutions but here’s a link to an apache solution
http://www.yourhtmlsource.com/sitemanagement/custom404error.html
This error page follows the Neilson Norman group’s recommendations for a useful error page, including links and a search box.
This site has links to some interesting 404s.
http://www.sendcoffee.com/minorsage/404error.html
Discuss the fact that students will expect different things from different buildings, their relationships and expectations are dictated by the shapes around them. Even if a person is not an architecture aficionado they will be affected by decisions made by architects.
Start a discussion about this idea, try and get students to understand how finding your way around is something that has developed over time. Our society teaches us how to navigate the built environment because of specific rules. You may want to explain that this is not a lecture in architecture and this is as deep as we are going on the subject.
This is also an opportunity for a continuity break, encourage students to discuss how they could adapt these principles to web design.
There is still a situation on the Web where many rules and conventions are still not established. Ask students what conventions they think are there already are
.e.g. Clicking the logo takes you to the home page. HAVING a home page. About us pages and Contact us pages.
Explain to students that many web sites have a page called site map. Though similar in concept, this is a specifically different entity. The site map page on a website demonstrates the structure, making it easier for search engine spiders to index the site correctly. What we are building is a diagram of information flow.
This diagram is reasonably self explanatory, encourage students to ask questions, ask them to explain what is happening. This approach is useful if you don’t have much existing content and are starting from scratch.
This approach is useful if there is already content for the site, for example a portfolio site or video archive. Neither approach is better, it is up to the developer to decide which is more suitable. Top down can sometimes cause important content details to be overlooked and bottom up can produce architecture that is not flexible enough for change.
At this point go to http://www.easyjet.com/en/book/index.asp and go through the process of booking a flight, you want to get to a page that shows you are at step 2 of 5.
Now go onto http://www.directline-flights.co.uk/flight_search.cfm and try to book the same flight.
The point is that directline holidays charge more for the flight but you can book in much fewer clicks. This is an important example for marketing.
This slide is self explanatory and 1 of 2, we will shortly discuss formal site architecture documentation.
Slide 2 of 2. It is rare that you will be aware in advance that you need to change the site this drastically. The very nature of the medium means that it is constantly changing and updating. It is important that this flexibility is built in.
A node can be a number or an entire library of photographs, by dealing with nodes we can abstract our problems to any collection of data, whatever the size.
Organic structures are useful for entertainment or or to encourage free-form exploration but it can be hard finding your way back to a useful section.
Sequential structures are useful for such things as instructions and step by step tutorials.
Discuss the fact that what may be obvious to the developer may not be so to the user. The structure above would be reasonable for a retail clothing operation but may not be suitable for someone who is looking to buy large amounts of trousers for a work force in a range of sizes. The structure of the site and the language used needs to fit with the user not the site.
This structure is similar to the site diagram in Dreamweaver. It is unlikely that students will go beyond the structure on the left but it is extremely useful if they become aware of the language and tools used. There will be a tutorial session on site structure and site diagrams.
