UXD. using the elements: structure

Size: px

Start display at page:

Download "UXD. using the elements: structure"

Jack Higgins
5 years ago
Views:

1 using the elements: structure

2 defining structure you are here structure essentially defines how users get to a given screen and where they can go when they re done. structure also defines categories of information. structure is created by interaction design, which presents information in a way people can interact with it. structure is also created by information architecture organization, labeling, search and navigation systems. good structure organizes information in a way that provides intuitive access to content.

3 structure should be appropriate complex educated audiences simple basic content training sites linear narrative predictable structure non-linear/hyperlinked flexible, but possibly confusing

4 structure should be flexible structure accommodates change

5 structure should be flexible MARCH

6 structure should be flexible APRIL

7 structure should be flexible JUNE

8 structure should be flexible SEPTEMBER

9 interaction design (IxD) dancing in step interaction design defines the structure and behavior of interactive systems. it creates meaningful relationships between people and the things they use. interaction it effectively design communicates interactivity and functionality. it reveals both simple and complex workflows. it informs users about state changes. it prevents user error.

10 five essential principles

11 IxD is consistent don t be different to be different; be different when it s better.

12 IxD is consistent components with similar behavior should have a similar appearance

13 IxD is consistent behavior transitions, rollovers, tooltips, etc. should behave consistently leverage the visitor s prior experience voice labels and terms should be the same throughout different labels mean different information or outcomes content and imagery photos, illustrations, and icons should have a stable and consistent style.

14 IxD is consistent design patterns reusable solutions to recurring problems content may change, but interaction and process stays the same makes actions and results consistent (and predictable)

15 IxD is visible discoverability shouldn t involve luck or chance. people should be able to tell that an opportunity to interact is available. use content hinting avoid false bottoms when more content and interactivity exists below the fold or beyond the visible space.

16 IxD is visible click and tap people attempt interaction with anything that could possibly be clickable or touchable standard UI components are understood to be interactive different text color, 3D, and icons invite interaction

17 IxD is visible touch and gesture there is no hover for touch screens. consider the lefties of the world by making interfaces reversible don t make people reach over the interface and obstruct their view

18 IxD is learnable interactions should be easy to learn and easy to remember. ideally, people use it once, learn it rapidly, remember it forever. in reality, they use it a few times, learn it, and hope they remember it next time.

19 IxD is learnable intuitive really means single trial learning. even interfaces that are easy to use may require learning, and the more we use it, the easier it seems. we learn behaviors from experiences across the web, devices, and real-world places and objects.

20 IxD is learnable gestures can be arbitrary. tap and release, tap and hold, tap and hold long, double-tap, multi-finger tap, tap/hold and drag, single finger drag, multi-finger drag, pinch, stretch, etc...! why can I swipe to move an image in a window, but not move the whole page?

21 IxD is predictable can users answer: where are you? how did you arrive here? what can you do here? where can you go from here? if YES then you have: provided a strong sense of place set the correct expectations made it possible for people to accurately predict outcomes of interactions

22 IxD is predictable use previews to set user expectations for new or complex interactions. show what can be done while the interface loads show a high-level view of the structure to provide context (a map )

23 IxD is predictable labels, instructions, icons, and images can all be used to set expectations about: what to do (touch here!) what will happen (open this, drag this over there) where the visitor will go (foster a sense of place) how the screen will respond (do X and Y will happen)

24 IxD provides feedback feedback provides: location where am I? status what s happening? is it still happening? future (via previews) what will happen? outcomes/results it has happened

25 IxD provides feedback every action should produce a visible, understandable and immediate reaction acknowledge interactions let people know they have been heard (or felt or seen) failing to acknowledge an interaction can lead to unnecessary repetition of actions and errors or mistakes

26 IxD provides feedback error prevention is the best error handling complement, don t complicate error messages should: describe what happened explain why it happened suggest a fix never blame the person

27 the five principles are interrelated consistency helps people use what they know. visibility of opportunity can invite interaction. learning is easier when predictions are accurate. feedback facilitates learning.

28 your marching orders remember: you are not designing for yourself. understand the goals and needs you re designing for. think hard about the design and the experience. set the user s expectations for the experience. don t hinder, obstruct, or interfere with the experience. try to break your designs be your own worst visitor. remember: you are not designing for yourself.

29 information architecture (IA) organize, categorize, prioritize information architecture is the creation of organizational and navigational schemes. a good IA allows people to move through content efficiently and effectively. information architecture but it s about more than just finding content. it s also about educating, informing and persuading, often in equal doses. an effective IA is flexible, accommodating growth and adapting to change.

30 hierarchy the hierarchy pattern is a standard site structure with an index page and a series of sub pages. it s good for organizing complicated structures that resemble a desktop site or system s structure. multi-faceted navigation structures can present a problem to people using small screens.

31 hub-and-spoke this gives users a central index; they ll navigate out from here. users can t navigate between spokes they have to return to the hub. good for multi-functional tools, each with a distinct internal navigation and purpose. not always good for users who want to multi-task.

32 nested this pattern leads users in a linear fashion to more detailed content. nesting provides a quick, easy method of navigation under stress. it also gives the user a strong sense of where they are. good for apps or sites with singular or closely related topics. can be a barrier to exploring users won t be able to quickly switch between sections.

33 tabbed this is a collection of sections tied together by a toolbar menu. it allows the user to quickly scan and understand the complete functionality of the app or scope of content upon opening. Good for tool-based apps with a similar theme or simple sites. watch for complexity this pattern is really meant for simple content structures.

34 bento box (dashboard) the dashboard pattern displays portions of related tools or content on a main screen. this pattern is more suited to desktop or tablet vs. mobile due to its complexity. it allows the user to get key information at a glance, but relies heavily on a well-designed UI.

35 bento box (dashboard) good for multi-functional tools and content-based tablet apps that have a similar theme. the tablet screen gives you more space to utilize this pattern well. it s critical that you understand how a user will interact with and between each piece of content.

36 filtered view this pattern allows the user to use filtering options to create an alternative view of a specific set of information. good for apps or sites with a high volume of content. can be a good basis for magazine style apps or sites, or as a sub pattern within another navigational pattern. can be trouble for mobile filters and faceted search can be difficult to display on a small screen.

37 organizing principles getting to know nodes a node is the basic unit of any information structure. nodes can be as small as a single number. nodes can be as large as an entire library. nodes allow us to use a common language and a common set of ideas across different kinds of problems. the organizing principles we use determine how the nodes in an information structure are arranged. in other words, it tells us which nodes are grouped together, and which are kept separate.

38 organizing principles corporate website consumer business investor audience is the organizing principle travel website n. america europe africa geography is the organizing principle

39 organizing principles rules of thumb the organizing principles used at the highest levels of the site or app should be those most closely tied to user needs and business objectives. those used at lower levels are usually influenced by feature specs and content requirements. every collection of information has a built-in conceptual structure and in most cases it has more than one. the hard part isn t creating a structure it s creating the right structure for our objectives and our users needs.

40 organizing principles facets facets are attributes of an information set that can provide a flexible set of organizing principles for nearly any kind of content. however, using the wrong facets can be worse than using none at all. when users have too many options to sort through, they often can t find anything. it s our job not the user s to identify the specific attributes of the information that will be most useful, usable and valuable to our users.

41 roles and processes who does what? it s still common for web dev teams to have no one explicitly responsible for structure. so it typically lands in the lap of the developer, unless there s a designer involved as well. in ideal situations, an information architect is on the team to deal specifically with issues related to information organization and related interaction design. whether you have a specialist to address structure or not isn t important but someone needs to do it.

42 roles and processes communicating structure methods vary based on the complexity of what s being produced. for projects with a high volume of content in a hierarchical structure, text outlines are often enough to document the architecture.

43 roles and processes visual vocabulary jesse james garrett s system for diagramming structures home media products support press releases home products office products file archives

44 roles and processes visual vocabulary jesse james garrett s system for diagramming structures continue from: home login flow latest news Y login page success? (1a) N technical papers continue to: member list (1a) - conditional selector

45 roles and processes hub-and-spoke diagram for projects with a high volume of content in a hub-andspoke structure, diagrams like this one are typically used.

46 roles and processes diagrams, no matter what kind, should focus on relationships between content: which categories go together? which don t? how do the steps in an interaction sequence fit together?

47 structure takeaways things to remember good structure organizes information in a way that provides intuitive access to content. structure is created by interaction design, which means presenting information in a way people can understand it, or interact with it. structure is also created by information architecture, which is the combination of organization, labeling, search and navigation systems within any digital product.

48 structure takeaways things to remember structure should be appropriate for the audience and flexible to accommodate change. whether you have a specialist to address structure or not isn t important but someone needs to do it. focus on relationships between content: which categories go together? which don t? how do the steps in an interaction sequence fit together?

49 structure exercise information architecture exercise You have the same edition of a newspaper, both online and as a printed hard copy in your hands. How would you go about looking for updated news about the trial of a famous athlete from a different country than your own in each version? Think about how you would do this in each case, and write down a narrative of that process.

50 structure exercise consider the following: which process allowed you to find the Information more easily? did that same process allow you to find the information more quickly? how could each IA be modified to improve speed/efficiency or ease of use? what significant differences do you see in the IA of each version of the newspaper?

GEOG 487 Lesson 2: Step-by-Step Activity

GEOG 487 Lesson 2: Step-by-Step Activity In Lesson 2, we are going to create a website that contains interactive maps with datasets related to our project scenario described in the Introduction. We will