USER EXPERIENCE, USER INTERFACE, & INFORMATION...
Transcript of USER EXPERIENCE, USER INTERFACE, & INFORMATION...
![Page 1: USER EXPERIENCE, USER INTERFACE, & INFORMATION …classes.dma.ucla.edu/Spring15/161/content/notes/2-UX.pdf · User Experience and Information Architecture. 2. Design. 3. Structure](https://reader035.fdocuments.us/reader035/viewer/2022062414/5edea3f6ad6a402d6669f86a/html5/thumbnails/1.jpg)
USER EXPERIENCE, USER INTERFACE, & INFORMATION ARCHITECTURE
![Page 2: USER EXPERIENCE, USER INTERFACE, & INFORMATION …classes.dma.ucla.edu/Spring15/161/content/notes/2-UX.pdf · User Experience and Information Architecture. 2. Design. 3. Structure](https://reader035.fdocuments.us/reader035/viewer/2022062414/5edea3f6ad6a402d6669f86a/html5/thumbnails/2.jpg)
The workflow of building a (static) site in four stages:
![Page 3: USER EXPERIENCE, USER INTERFACE, & INFORMATION …classes.dma.ucla.edu/Spring15/161/content/notes/2-UX.pdf · User Experience and Information Architecture. 2. Design. 3. Structure](https://reader035.fdocuments.us/reader035/viewer/2022062414/5edea3f6ad6a402d6669f86a/html5/thumbnails/3.jpg)
1. User Experience and Information Architecture
![Page 4: USER EXPERIENCE, USER INTERFACE, & INFORMATION …classes.dma.ucla.edu/Spring15/161/content/notes/2-UX.pdf · User Experience and Information Architecture. 2. Design. 3. Structure](https://reader035.fdocuments.us/reader035/viewer/2022062414/5edea3f6ad6a402d6669f86a/html5/thumbnails/4.jpg)
2. Design
![Page 5: USER EXPERIENCE, USER INTERFACE, & INFORMATION …classes.dma.ucla.edu/Spring15/161/content/notes/2-UX.pdf · User Experience and Information Architecture. 2. Design. 3. Structure](https://reader035.fdocuments.us/reader035/viewer/2022062414/5edea3f6ad6a402d6669f86a/html5/thumbnails/5.jpg)
3. Structure (HTML)
![Page 6: USER EXPERIENCE, USER INTERFACE, & INFORMATION …classes.dma.ucla.edu/Spring15/161/content/notes/2-UX.pdf · User Experience and Information Architecture. 2. Design. 3. Structure](https://reader035.fdocuments.us/reader035/viewer/2022062414/5edea3f6ad6a402d6669f86a/html5/thumbnails/6.jpg)
4. Style (CSS)
![Page 7: USER EXPERIENCE, USER INTERFACE, & INFORMATION …classes.dma.ucla.edu/Spring15/161/content/notes/2-UX.pdf · User Experience and Information Architecture. 2. Design. 3. Structure](https://reader035.fdocuments.us/reader035/viewer/2022062414/5edea3f6ad6a402d6669f86a/html5/thumbnails/7.jpg)
s k e l e t o n
s t r u c t u r e
s t r a t e g y
s u r f a c e
s c o p e
Abstract
Concrete
Surface brings everything together visually: What will the finished product look like?
Skeleton makes structure concrete: What components will enable people to use the site?
Structure gives shape to scope: How will the pieces of the site fit together and behave?
Scope transforms strategy into requirements: What features will the site need to include?
Strategy is where it all begins: What do we want to get out of the site? What do our users want?
Jesse James Garrett
![Page 8: USER EXPERIENCE, USER INTERFACE, & INFORMATION …classes.dma.ucla.edu/Spring15/161/content/notes/2-UX.pdf · User Experience and Information Architecture. 2. Design. 3. Structure](https://reader035.fdocuments.us/reader035/viewer/2022062414/5edea3f6ad6a402d6669f86a/html5/thumbnails/8.jpg)
What is “User Experience?”
![Page 9: USER EXPERIENCE, USER INTERFACE, & INFORMATION …classes.dma.ucla.edu/Spring15/161/content/notes/2-UX.pdf · User Experience and Information Architecture. 2. Design. 3. Structure](https://reader035.fdocuments.us/reader035/viewer/2022062414/5edea3f6ad6a402d6669f86a/html5/thumbnails/9.jpg)
User A person trying to get something done (learn something, make something, do something) with a piece of software or a website.
![Page 10: USER EXPERIENCE, USER INTERFACE, & INFORMATION …classes.dma.ucla.edu/Spring15/161/content/notes/2-UX.pdf · User Experience and Information Architecture. 2. Design. 3. Structure](https://reader035.fdocuments.us/reader035/viewer/2022062414/5edea3f6ad6a402d6669f86a/html5/thumbnails/10.jpg)
Information Architecture - How and where the information on a
page is presented. - How bits of information are related
to each other - How a user navigates between
pieces of information.
![Page 11: USER EXPERIENCE, USER INTERFACE, & INFORMATION …classes.dma.ucla.edu/Spring15/161/content/notes/2-UX.pdf · User Experience and Information Architecture. 2. Design. 3. Structure](https://reader035.fdocuments.us/reader035/viewer/2022062414/5edea3f6ad6a402d6669f86a/html5/thumbnails/11.jpg)
Interface The layout and presentation of the functionality of a piece of software. How software presents to the user what s/he can do with it.
![Page 12: USER EXPERIENCE, USER INTERFACE, & INFORMATION …classes.dma.ucla.edu/Spring15/161/content/notes/2-UX.pdf · User Experience and Information Architecture. 2. Design. 3. Structure](https://reader035.fdocuments.us/reader035/viewer/2022062414/5edea3f6ad6a402d6669f86a/html5/thumbnails/12.jpg)
Elements of an Interface - Spatial Organization - Affordances
![Page 13: USER EXPERIENCE, USER INTERFACE, & INFORMATION …classes.dma.ucla.edu/Spring15/161/content/notes/2-UX.pdf · User Experience and Information Architecture. 2. Design. 3. Structure](https://reader035.fdocuments.us/reader035/viewer/2022062414/5edea3f6ad6a402d6669f86a/html5/thumbnails/13.jpg)
![Page 14: USER EXPERIENCE, USER INTERFACE, & INFORMATION …classes.dma.ucla.edu/Spring15/161/content/notes/2-UX.pdf · User Experience and Information Architecture. 2. Design. 3. Structure](https://reader035.fdocuments.us/reader035/viewer/2022062414/5edea3f6ad6a402d6669f86a/html5/thumbnails/14.jpg)
![Page 15: USER EXPERIENCE, USER INTERFACE, & INFORMATION …classes.dma.ucla.edu/Spring15/161/content/notes/2-UX.pdf · User Experience and Information Architecture. 2. Design. 3. Structure](https://reader035.fdocuments.us/reader035/viewer/2022062414/5edea3f6ad6a402d6669f86a/html5/thumbnails/15.jpg)
![Page 16: USER EXPERIENCE, USER INTERFACE, & INFORMATION …classes.dma.ucla.edu/Spring15/161/content/notes/2-UX.pdf · User Experience and Information Architecture. 2. Design. 3. Structure](https://reader035.fdocuments.us/reader035/viewer/2022062414/5edea3f6ad6a402d6669f86a/html5/thumbnails/16.jpg)
What is a Design Document?
![Page 17: USER EXPERIENCE, USER INTERFACE, & INFORMATION …classes.dma.ucla.edu/Spring15/161/content/notes/2-UX.pdf · User Experience and Information Architecture. 2. Design. 3. Structure](https://reader035.fdocuments.us/reader035/viewer/2022062414/5edea3f6ad6a402d6669f86a/html5/thumbnails/17.jpg)
Parts of a Design Document
1. The Big Idea 2. Audience and User Stories 3. Sitemap 4. Wireframes 5. Design Mockups
![Page 18: USER EXPERIENCE, USER INTERFACE, & INFORMATION …classes.dma.ucla.edu/Spring15/161/content/notes/2-UX.pdf · User Experience and Information Architecture. 2. Design. 3. Structure](https://reader035.fdocuments.us/reader035/viewer/2022062414/5edea3f6ad6a402d6669f86a/html5/thumbnails/18.jpg)
The Big Idea
Brief summary of what the site is, what it’s about, etc. What are the major goals you have for the site? This might be called “The elevator pitch.”
![Page 19: USER EXPERIENCE, USER INTERFACE, & INFORMATION …classes.dma.ucla.edu/Spring15/161/content/notes/2-UX.pdf · User Experience and Information Architecture. 2. Design. 3. Structure](https://reader035.fdocuments.us/reader035/viewer/2022062414/5edea3f6ad6a402d6669f86a/html5/thumbnails/19.jpg)
User Stories
Building on an understanding of who the site is aimed at, user stories are short stories written about how a particular type of user used the site to achieve a goal.
![Page 20: USER EXPERIENCE, USER INTERFACE, & INFORMATION …classes.dma.ucla.edu/Spring15/161/content/notes/2-UX.pdf · User Experience and Information Architecture. 2. Design. 3. Structure](https://reader035.fdocuments.us/reader035/viewer/2022062414/5edea3f6ad6a402d6669f86a/html5/thumbnails/20.jpg)
Sitemap
A sitemap is an overall view of the pages on the site. Though there are many variations, most commonly, pages are drawn as boxes, with lines representing links.
![Page 21: USER EXPERIENCE, USER INTERFACE, & INFORMATION …classes.dma.ucla.edu/Spring15/161/content/notes/2-UX.pdf · User Experience and Information Architecture. 2. Design. 3. Structure](https://reader035.fdocuments.us/reader035/viewer/2022062414/5edea3f6ad6a402d6669f86a/html5/thumbnails/21.jpg)
![Page 22: USER EXPERIENCE, USER INTERFACE, & INFORMATION …classes.dma.ucla.edu/Spring15/161/content/notes/2-UX.pdf · User Experience and Information Architecture. 2. Design. 3. Structure](https://reader035.fdocuments.us/reader035/viewer/2022062414/5edea3f6ad6a402d6669f86a/html5/thumbnails/22.jpg)
![Page 23: USER EXPERIENCE, USER INTERFACE, & INFORMATION …classes.dma.ucla.edu/Spring15/161/content/notes/2-UX.pdf · User Experience and Information Architecture. 2. Design. 3. Structure](https://reader035.fdocuments.us/reader035/viewer/2022062414/5edea3f6ad6a402d6669f86a/html5/thumbnails/23.jpg)
![Page 24: USER EXPERIENCE, USER INTERFACE, & INFORMATION …classes.dma.ucla.edu/Spring15/161/content/notes/2-UX.pdf · User Experience and Information Architecture. 2. Design. 3. Structure](https://reader035.fdocuments.us/reader035/viewer/2022062414/5edea3f6ad6a402d6669f86a/html5/thumbnails/24.jpg)
![Page 25: USER EXPERIENCE, USER INTERFACE, & INFORMATION …classes.dma.ucla.edu/Spring15/161/content/notes/2-UX.pdf · User Experience and Information Architecture. 2. Design. 3. Structure](https://reader035.fdocuments.us/reader035/viewer/2022062414/5edea3f6ad6a402d6669f86a/html5/thumbnails/25.jpg)
Wireframes
A way to visually describe the content and functionality (affordances) of a page without actually building it.
![Page 26: USER EXPERIENCE, USER INTERFACE, & INFORMATION …classes.dma.ucla.edu/Spring15/161/content/notes/2-UX.pdf · User Experience and Information Architecture. 2. Design. 3. Structure](https://reader035.fdocuments.us/reader035/viewer/2022062414/5edea3f6ad6a402d6669f86a/html5/thumbnails/26.jpg)
Wireframes
Wireframes are the “blueprint for design.”
![Page 27: USER EXPERIENCE, USER INTERFACE, & INFORMATION …classes.dma.ucla.edu/Spring15/161/content/notes/2-UX.pdf · User Experience and Information Architecture. 2. Design. 3. Structure](https://reader035.fdocuments.us/reader035/viewer/2022062414/5edea3f6ad6a402d6669f86a/html5/thumbnails/27.jpg)
![Page 28: USER EXPERIENCE, USER INTERFACE, & INFORMATION …classes.dma.ucla.edu/Spring15/161/content/notes/2-UX.pdf · User Experience and Information Architecture. 2. Design. 3. Structure](https://reader035.fdocuments.us/reader035/viewer/2022062414/5edea3f6ad6a402d6669f86a/html5/thumbnails/28.jpg)
![Page 29: USER EXPERIENCE, USER INTERFACE, & INFORMATION …classes.dma.ucla.edu/Spring15/161/content/notes/2-UX.pdf · User Experience and Information Architecture. 2. Design. 3. Structure](https://reader035.fdocuments.us/reader035/viewer/2022062414/5edea3f6ad6a402d6669f86a/html5/thumbnails/29.jpg)
![Page 30: USER EXPERIENCE, USER INTERFACE, & INFORMATION …classes.dma.ucla.edu/Spring15/161/content/notes/2-UX.pdf · User Experience and Information Architecture. 2. Design. 3. Structure](https://reader035.fdocuments.us/reader035/viewer/2022062414/5edea3f6ad6a402d6669f86a/html5/thumbnails/30.jpg)
![Page 31: USER EXPERIENCE, USER INTERFACE, & INFORMATION …classes.dma.ucla.edu/Spring15/161/content/notes/2-UX.pdf · User Experience and Information Architecture. 2. Design. 3. Structure](https://reader035.fdocuments.us/reader035/viewer/2022062414/5edea3f6ad6a402d6669f86a/html5/thumbnails/31.jpg)
![Page 32: USER EXPERIENCE, USER INTERFACE, & INFORMATION …classes.dma.ucla.edu/Spring15/161/content/notes/2-UX.pdf · User Experience and Information Architecture. 2. Design. 3. Structure](https://reader035.fdocuments.us/reader035/viewer/2022062414/5edea3f6ad6a402d6669f86a/html5/thumbnails/32.jpg)
![Page 33: USER EXPERIENCE, USER INTERFACE, & INFORMATION …classes.dma.ucla.edu/Spring15/161/content/notes/2-UX.pdf · User Experience and Information Architecture. 2. Design. 3. Structure](https://reader035.fdocuments.us/reader035/viewer/2022062414/5edea3f6ad6a402d6669f86a/html5/thumbnails/33.jpg)
![Page 34: USER EXPERIENCE, USER INTERFACE, & INFORMATION …classes.dma.ucla.edu/Spring15/161/content/notes/2-UX.pdf · User Experience and Information Architecture. 2. Design. 3. Structure](https://reader035.fdocuments.us/reader035/viewer/2022062414/5edea3f6ad6a402d6669f86a/html5/thumbnails/34.jpg)
The Three Layers of a Wireframe
Content — graphics, textual content (blogs, articles, product descriptions, etc.), logos, page headings, forms, etc
Layout — header, footer, branding, content areas, etc., and content prioritization.
Behavior — notes and annotations to explain functions that can’t be shown in a 2-D image, i.e., error messaging, pop-up forms, default settings, etc