IMD09117 and IMD09118
Web Design and Development
Interaction Design.
Information Architecture.
The 5 Planes Model
Last session we looked at Functionality.
By now we have used our skills to work
out what we’re building...
The Structure Plane
Interaction Design is a software
development term for creating a structured
user experience.
Informati...
Interaction Design
You need to design your system to
accommodate and respond to the needs
and demands of the person using ...
Interaction Design
This is a huge subject area and beyond the
scope of this lecture.
Succinctly Interaction Design aims to...
Ease of Use
It’s important to remember that people will
view your site simply as a part of the Web,
a destination they sto...
Errors
This is known as a 404 error.
Errors
MIT has a much more useful error page.
Information Architecture
The word architecture is very important. In
the physical world we understand the
purpose and use ...
Architecture and the wider
world.
Architecture is not simply about individual
buildings but where the buildings are
placed...
Information Architecture
The structure of a website should be
designed in such a way that people can
find what they want q...
Site Map
The bottom line of what we are producing is a site map. The
map gives us a specific hierarchical understanding of...
Top Down Approach
The site architecture
is constructed
according to site
objectives and user
needs.
Content
This creates a...
Bottom Up Approach
Content analysis and
functional
requirements drive
the structure.
Content
How many sections?
The number isn’t important, it needs to
make sense to a user.
You can measure the amount of steps to
co...
Flexibility
Site architecture should be flexible enough to add new content into a
section.
Flexibility
Or entire new sections.
Nodes and structures
A node: any group or piece of information.
Hierarchical structure.
Formalised and common.
Matrix stru...
Structures
Organic structure.
Good for exploring a set
of topics without obvious
relationships although it
can be confusin...
Sections
The clothes shop. Home
Page.
Men Women Children
Tops Bottoms Outer
The most important factor to consider is the l...
Formal Documentation
We use formal documentation because it’s structure is reasonably intuitive. It is a useful
method of ...
Upcoming SlideShare
Loading in …5
×

Interaction Design

607 views

Published on

Published in: Education, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
607
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 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.
  • Interaction Design

    1. 1. IMD09117 and IMD09118 Web Design and Development Interaction Design. Information Architecture.
    2. 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. 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. 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. 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. 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.
    7. 7. Errors This is known as a 404 error.
    8. 8. Errors MIT has a much more useful error page.
    9. 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. 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. 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. 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. 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.
    14. 14. Bottom Up Approach Content analysis and functional requirements drive the structure. Content
    15. 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.
    16. 16. Flexibility Site architecture should be flexible enough to add new content into a section.
    17. 17. Flexibility Or entire new sections.
    18. 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. 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. 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. 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.

    ×