This individual project was completed for a graduate course in Human-Computer Interaction at the Indiana University School of Informatics and Computing at IUPUI.
I was challenged to design the information architecture and navigation for a novel, content-intensive interactive system by applying a design approach known as the Interactive Dialogue Model.
I decided to design a web application to allow K-12 educators to find and share Open Education Resources (OER) — such as curriculum units, lesson plans, quizzes, etc. — that are free to adopt or adapt under Creative Commons licenses. Educators are increasingly seeking quality OER content to improve student learning, while also saving time and cost for teachers and schools.
The Interactive Dialogue Model (IDM) is an approach that uses the metaphor of conversation to conceptualize and design the interaction of users with a system. IDM is well-suited for designing complex, content-intensive interactive applications.
IDM views the user experience as a dialogue with the system. This dialogue can be conceptualized in terms of:
Each topic (or group of topics) can be “single” or “multiple” depending on whether it has one unique instance or multiple instances. For a multiple topic (or multiple group of topics), the application must provide a way for the user to select a specific instance. For example, in a music application, Artists would be a multiple topic (each specific artist is an instance), and Artists by Genre would be a multiple group of topics (that includes groups such as Hip-Hop Artists, Rock Artists, etc.).
Once preliminary user and functional requirements have been established, IDM design proceeds in three stages:
By focusing on user dialogues with the system, IDM allows the information architecture and navigation to emerge naturally from the intended user experiences.
The IDM conceptual and logical designs can be combined into a single visualization: an isometric map that represents the architecture allowing a user to interact with the application. The “mock 3-D” isometric map offers a “birds-eye” view of the entire application, as well as the ability to zoom in to examine the “ground-level” details of specific content and interactions.
The IDM page design identifies the types of elements and links that should be present on a particular type of page within the application. While this page design is often presented as a visual mockup, it simply represents a starting point for a user interface design to be finalized later.
I used IDM to design the architecture for a web application to allow educators to easily find, contribute, revise, remix, rate, and use OER content (such as lesson plans, quizzes, etc.). I tentatively named the application as “OpenED Commons.”
The OER content in the application would have associated metadata (including but not limited to: content area, grade level, learning standard, etc.) to allow searching and categorizing of content — but also to ensure compliance with the Learning Resource Metadata Initiative (LRMI) specification and other educational metadata specifications, which help ensure content is compatible with learning management systems and is accessible to the broadest range of students.
I determined there were two user roles for this application: content seekers and content providers. Most users will be seeking content, while a smaller number of users will be providing content. Of course, some users will alternate roles at different times. I conducted background research on K-12 educators and created a user profile for each role.
|User Role||User Profile|
I determined that the core functional requirements for this application would include:
I created multiple user scenarios to better conceptualize why and how different people might use the application.
User Scenario 1: Maren is 28-year old teacher with a Bachelor’s in Mathematics Education. She has been teaching Mathematics to middle school students for 6 years at a small rural school. Her state recently implemented the Common Core State Standards for Mathematics, which are more rigorous than the previous state standards. Her school has a limited budget for updating textbooks and other instructional materials, so she is interested in finding open educational resources to support the teaching of the new standards. A fellow teacher suggests trying OpenED Commons to find OER materials developed and shared by other educators. Maren browses the site, searching by Math standards. She finds several highly rated lesson plans targeting some of the new standards. Browsing through the lessons leads her to discover related assessments and unit plans. She creates an account and downloads a Math unit and assessments to use with her students. She plans to add some of her own content to share with other teachers. Maren is excited to join a virtual community where teachers can help each other improve student learning experiences.
I created the IDM conceptual design for the application by identifying its specific topics, the semantic relationships among the topics, and relevant groups for organizing and accessing topics.
The types of educational content (and their relationships) can be summarized as follows:
The application would also need topics for: adding content, revising/remixing content, tutorials, OER Licenses, etc.
I decided that relevant groups of topics would include: highest rated content, newest content, content by learning standard, content by grade level, content by topic, etc.
Next, I created a written description of the IDM logical design for the application:
I used the IDM logical design to create an isometric map of the user experience architecture for the application.
The isometric map was created in Microsoft PowerPoint using an open-source library of IDM map elements that can be copied, pasted, and modified to generate large architecture maps for websites and applications.
The isometric map shows:
The map is intended to be viewed on a large screen (or printed on a large sheet). Zooming out provides a “birds-eye” view of the application’s organization and navigation, while zooming in shows “ground-level” details of specific content and interactions. The map can be shared with a range of internal and external stakeholders to examine the user experience flows enabled by the information architecture.
Finally, I created several sample page designs based on the information architecture and navigation represented in the isometric map. These page designs identify the types of elements and links that should be present on a particular type of page, but the page designs represent only a possible starting point for the user interface design. The ultimate goal is to generate finalized page templates to ensure consistency across the application and enable the experiences envisioned in the architecture map.
IDM provides a useful approach for designing large information-intensive websites and applications. The IDM isometric architecture map provides the dual benefit of being able to zoom out to view the high-level organization and navigation of an application, while also being able to zoom in to examine low-level details and interactions. These maps are also useful for sharing with non-designer stakeholders, who can quickly understand them after a basic explanation of the map legend.