Your SlideShare is downloading. ×
0
Marketing and Advertising: web design, web information architecture, usability testing
Marketing and Advertising: web design, web information architecture, usability testing
Marketing and Advertising: web design, web information architecture, usability testing
Marketing and Advertising: web design, web information architecture, usability testing
Marketing and Advertising: web design, web information architecture, usability testing
Marketing and Advertising: web design, web information architecture, usability testing
Marketing and Advertising: web design, web information architecture, usability testing
Marketing and Advertising: web design, web information architecture, usability testing
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Marketing and Advertising: web design, web information architecture, usability testing

1,428

Published on

Marketing and Advertising: Focusing on web communication and web design via the C.R.A.P. framework, usability testing (heuristics, Think Aloud Test, card sorting). Includes an assignment for students. …

Marketing and Advertising: Focusing on web communication and web design via the C.R.A.P. framework, usability testing (heuristics, Think Aloud Test, card sorting). Includes an assignment for students. Validated slides with source links.

By David Engelby 2013

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

  • Be the first to like this

No Downloads
Views
Total Views
1,428
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Marketing & Advertising 4 Web communication / Design and usability tests MULTIMEDIA DESIGN
  • 2. Web communication: content and form Marketing & Advertising 4 Web communication is a good mix between content and form: that is, content and design. Design is more than a pretty surface. When you visit a website you are on a mission; you want something (information, enter- tainment, goods, software etc.). Information architecture is the first step. Why? Because content is king! So before you start designing a fancy graphic user interface, start thinking about the context: What is the theme of the website? Who is your client? What kind of market is it? >> Content and Users: Who are the users? What do they look for? Write clear and good texts for the website. Source: http://www.theguardian.com/help/insideguardian/2010/feb/02/what-is-information-architecture CONTEXT USERSCONTENT AI Here you can also add a persona and a scenario.
  • 3. Web communication: content and form Marketing & Advertising 4 Information architecture is combined with the relevant graphic user in- terface of the website. You should do some tests even before sketching anything, and we’ll get back to that. First, let us take a look at a simple and useful method of organizing informa- tion while making use of good design priciples (form) as well as content. It is important that the user of the website can answer these questions at once: Where am I? What can I do here? Why Should I do it? So focus on good user experience (UX): how can you design a website in a way to com- bine good web conventions (POP) and a design as a particular brand identity (POD)? Apply the C.R.A.P. framework. Source: http://www.1stwebdesigner.com/design/important-usability-principles-website-designers/ and http://lab.christianmontoya.com/designing-with-crap/designing-with-crap-cc.pdf CONTRAST ALIGNMENT PROXIMITY REPETITION The C.R.A.P. framework for the design of a website.
  • 4. Web communication: content and form Marketing & Advertising 4 Source: http://lab.christianmontoya.com/designing-with-crap/designing-with-crap-cc.pdf and http://www.userfocus.co.uk/articles/A_CRAP_way_to_improve_usability.html CONTRAST REPETITION ALIGNMENT PROXIMITY
  • 5. Usability testing 101 Marketing & Advertising 4 Gangstertest method TYPE OF METHOD: Expert analysis and/or user test meth- od: This means you can use the gang- stertest as an expert first to evaluate a website (yours or others), and then make four or five persons evaluate the website following the same ques- tions (they see things differently than you and vice versa). You can also per- form only an expert analysis (before doing another type of user testing) or only a user testing session. METHODOLOGY: Quantitative / Evaluate / Organize APPROACH / ASK ABOUT: What website is this? (logo or other types of idintification). What kind of sections are there on the website? (the way the design shows you what’s on the website) What subpage am I on? (look for title or descriptions) EVALUATION METHOD: 0 – this information can not be found 1 – this information is difficult to find 2 – this information is easy to find 3 – this information is very easy to find What are my options at this level? (look at menu’s, icons, functions) Where am I in the scheme of things? (breadcrums, overview, understanding how you got to that page) Where can I search? (search bar) Source: http://www.peterrybarik2.szm.com/PdfFiles/Usability.pdf and http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/
  • 6. Usability testing 101 Marketing & Advertising 4 Card sorting method TYPE OF METHOD: Expert analysis and user test method: This means you can use the card sorting approach as an expert first to organize a website (yours or others), and then make four or five persons evaluate the website following the same method (they see things differ- ently than you and vice versa). METHODOLOGY: Quantitative / Organize APPROACH / DO THIS: Read the links in the “source” section below. Ask the teacher. Watch this: http://www.youtube.com/watch?v=S9i4ByDKnR4 Source: http://sixrevisions.com/usabilityaccessibility/card-sorting/ and http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/
  • 7. Usability testing 101 Marketing & Advertising 4 Think Aloud Test (and heuristics) TYPE OF METHOD: Expert analysis and user test method: This means you can use heuristics as an expert first to evaluate a website (yours or others), and then make four or five persons evaluate the website (they see things differently than you and vice versa). You can also perform an expert analysis (before doing an- other type of user testing). METHODOLOGY: Quantitative / Qualitative / Evaluate APPROACH / DO THIS: They are called “heuristics” because they are more in the nature of rules of thumb than specific usability guide- lines. You can follow the traditional ten heuristics (by Jakob Nielsen) or you can use your logical heuristics based on the functions of the site: This means that you can make a list with the functions and then test these 0 – this information can not be found 1 – this information is difficult to find EVALUATION METHOD for quantitative questions only: 2 – this information is easy to find 3 – this information is very easy to find Source: http://www.nngroup.com/articles/ten-usability-heuristics/ and http://instone.org/heuristics functions by asking the informant (the person who is testing the site) to do specific tasks, that involves these functions. This is similar to a Think Aloud Test. In this test you can ask both quantitative questions (realted to heuristics) and qualitative ques- tions (related to opinions on design). Watch this: http://www.youtube.com/ watch?v=r0A6IW2TFFI
  • 8. Assignment Marketing & Advertising 4 Your task Conduct a usability test (group as- signment). Include the following: • Think Aloud Test (method). • Quantitative heuristics. • Qualitative questions as a part of an interview after the Think Aloud Test (i.e. the design and what the inform- ants think about it). Approach • Find a website which is difficult to navigate on. Make an expert evalua- tion to begin with, perhaps a gang- ster test, to establish that there are a series of problems with the naviga- tion and the design. • Make a simple hypothesis: Why is this a difficult website to navigate on? Write down the central prob- lems. Use also your professional knowledge as argumentation. • Make a list of tasks for the Think Aloud Test (heuristic evaluation). The tasks must be simple and the person must state out loud what he/she is doing and what happens. • Make sure the informants (3 to 4 people) gets time to solve the tasks. Don’t help the informants, if the task is not solved, just move on to the next question. • Make at least 15–20 action based questions for a 20–30 minutes ses- sion with each informant. • Make also a list of questions for an interview with a qualitative focus. Make the questions easy to under- stand, and don’t mix your quantita- tive (closed) working questions and your qualitative (open) interview questions. • Evaluate during the test by writing down numbers to the questions ac- cording to this system: 0=couldn’t be done, 1=was difficult, 2=was easy, 3=not an issue. Be neutral. You are not testing the informant, but the website! • What suggestions do you have to improve the site’s information architecture? Present sketches for improvement and show other sites with better solutions. • Include the C.R.A.P. framework to validate your suggestion for a better design. Make a slide based presentation of your assignment. All members must contribute with substantial elements.

×