In this video, Diane Cronenwett shows you how to create an information architecture diagram for the UX of a multidevice design project.
- Now that we have a better idea of how we want these devices to work together, we need to organize the activities and define a navigation model for the music app that will easily scale across various devices. This music app is focused around playlists, and users creating playlists, sharing them, and system recommended playlists based on songs you've liked. Before we even touch in a UI, it's important we think about the structure of how all the activities will be organized to make sure it's clear to the user how to navigate our app easily.
We can start with the list of activities we came up with and start to further organize those into a higher level navigation. The next thing we want to do is create an information architecture diagram. This is a diagram that helps us organize the types of content we want in our app. I created this diagram to capture the content for our music app. In this diagram I have four major areas of content. Profile, Playlists, Search and Song.
These are the larger categories that all the content will fit under. Now that I know which content is going in the app, I can determine which layouts can accommodate for these categories, and decide on the type of navigation model that would work best for the content. I want to keep the navigation fairly simple so I'm opting to have an immersive experience with the three main areas are Playlist, Search and Profile. The song information will contain lyrics and artist information so we can organize that around the song itself.
I'll put this into a high level mock up to experiment with the layout and define where the major content chunks will go. Defining the information architecture will help us come up with an interaction model that we scale across each device. We want to start thinking about this before we start designing and laying things out so we have a better approach of the organization's structure of the app, and we're not trying to figure it out while we're designing. Now that we've come up with a good information architecture, we can start laying out our design.
- Principles for multidevice design
- Responsive design in action
- Designing for multiple devices using native paradigms
- Designing mobile or tablet interfaces
- Designing for a watch, a TV, or for voice
- Creating an information architecture diagram
- Using Sketch to design your mobile experience
- Prototyping with InVision
- Exploring Bootstrap and Foundation