InDesign UX Design Patterns. by Justin Putney

InDesign UX Design Patterns by Justin Putney

InDesign UX Design Patterns Hi, I m Justin Putney, Owner of Ajar Productions. Thanks for downloading this guide! It s full of ways to create interactive user experiences (UX) with Adobe InDesign. This guide will help you Generate ideas for interactive experiences Construct working user interface elements with InDesign Design prototypes, micro-sites, and digital documents without needing to write code If any of the above sound useful to you, keep reading! You can easily return to this guide and use it as a reference, but I recommend that you read through it once to get a sense of what you can build with InDesign alone. 1.0 copyright 2017 Ajar Productions page B of C

How This Guide is Organized This guide is broken into patterns or types of experiences. Assumptions For brevity sake, this guide assumes that you already have familiarity with InDesign s interactive tools. If not check out these articles on MSOs, Buttons, and Animation. There more resources at the end of the guide. There are 4 formats referenced in this guide. 1. in5 (InDesign to HTML5)* - Which exports layouts and interactivity to HTML5. Once the content is in HTML, it can be posted directly to the web or easily converted into an app format. 2. Fixed Layout epub (abbreviated as FXL epub) - This is the export option from the InDesign File menu used for e-books. 3. Publish Online (abbreviated as PO) - Experimental web export that is built into InDesign. 4. (Interactive) PDF - In many cases, PDF will not work because of unsupported features, but alternative options are provided when available. * Note that I am the creator of in5, which makes me knowledge-able, but potentially biased as well, so keep that in mind. ;-) Conventions This guide refers to users, viewers, and readers interchangeably. These are the people who are using, viewing, and reading your digital document/site/app (sometimes referred to generically as an experience). These are the people for whom you want to create an awesome experience so that they read more of your stuff or buy your product. So let s dive in start making awesome stuff! 1.0 copyright 2017 Ajar Productions page C of C

CONTENTS InDesign UX Design Patterns...B Pop-ups and Feedback... 2 Modal Dialogs and Alerts.... 3 Video Pop-ups... 4 Contextual Information.... 5 Notifications.... 6 Progress Indication... 7 Bread Crumbs...................... 8 Progress Indication.... 9 Achievement.... 10 Navigation.... 11 Non-linear.... 12 Tabbed Sections.... 13 Drop-down Menus.... 14 Dynamic.... 15 Accordion Menus.... 16 Visual Exploration... 17 Zoomed Graphic... 18 Thumbnail Gallery.... 19 Scrolling Frame... 20 Resources... 21 Additional Online Learning... 22 Final Thoughts.... 22 1.0 copyright 2017 Ajar Productions page 1 of 22

Modal Dialogs and Alerts A modal dialog is something that interrupts the user s normal flow to provide a critical message or get input. Modal means that no other action can be taken while the dialog is open. How to Build Dialogs 1. Create an overlay that covers the entire page (this will block clicks to content underneath). 2. Convert this to a Multi-State Object (MSO) using the Object States panel and give the new state a name, e.g., dialog. 3. Create a new empty state with only a small, blank rectangle (so that it doesn t block content) and delete any other content in this state. 4. Create the dialog graphics in the dialog state and create a button with a Go To State action that points to the empty state. This will close the dialog. You can also create additional states and buttons for more complex dialogs with multiple possible user responses. The Extra Mile You can also add On State Load animation(s) to refine the experience of your dialog. Alternate Construction If you want to save some design time, you can piggyback off the dialog already built into the browser by using JavaScript, e.g., alert( This is my important message. ); Both in5 and FXL epub will let you attach JavaScript files to your output. in5, FXL epub, PO. Interactive PDF cannot be used because it does not support MSOs. 1.0 copyright 2017 Ajar Productions page 3 of 22

Video Pop-ups Video is a great way to engage viewers, but it takes up a lot of screen real estate. This can be fixed by opening a larger video in a pop-up. How to Build Video Pop-ups Use the steps from the Modal Dialog pattern to create an MSO with an active state and an empty state. 1. Place a video into the active state. 2. In addition to to the Go to State action to close the pop-up, there should also be an action on the same button to Stop the video (so that it doesn t continue to play while hidden). The Extra Mile If you want your video to autoplay when the popup is opened, you can add a Play action the launch button. Alternatively, select Play on Page Load and in5 will recognize that the video is part of a state and play on State load. To let the user know that a video is going to be opened, consider adding a thumbnail with a play icon to further improve the user experience. in5, FXL epub, PO. Interactive PDF cannot be used because it does not support MSOs and video playback relies on the Flash Player. 1.0 copyright 2017 Ajar Productions page 4 of 22

Contextual Information Unlike a print document, your digital document doesn t have to show everything at once. You can let the viewer selectly choose what is relevant and where to dive more deeply into your content. How to Build Contextual Pop-ups 1. Create an MSO with an empty state as described in the Modal Dialog pattern (but skip creating a background that covers the entire page). 2. Add a button that triggers the content state and a close button that triggers the empty state. The Extra Mile You can design the button and MSO to look like they re once piece to the user. You can also put the button in the first state (instead of being empty ) so that the button is hidden when the content is active. Tip: Make your button a touch-friendly size (minimum 50 pixels x 50 pixels). You can right-click on the InDesign ruler to switch to pixels. in5, FXL epub, PO. Interactive PDF cannot be used because it does not support MSOs, but you could create an alternative with hide/show button events. 1.0 copyright 2017 Ajar Productions page 5 of 22

Notifications Sometimes you want to alert the user, but not interrupt the flow of interaction. Your Operating System does this all the time. A message appears in the corner of the screen, then fades away after a few seconds. How to Build a Notification This technique relies on a compound animation. InDesign won t let you apply two animations to an object, but you can wrap the object in a group and apply a second animation to the group. 1. Create the notification graphic and/or text on the page. 2. Create a small empty rectangle on top of the notification itself and group the notification and the rectangle together. 3. Select the notification and apply a Preset in the Animation panel, e.g., Fly in from right. 4. Select the group (ESC key) and apply an animation to the group, e.g., Fade out. 5. By default, the animations will be triggered with On Page Load. To trigger with a button, either use the Buttons and Forms panel, or the trigger button in the Animation panel to add an Animation (Play) action to the button for both the notification and the surrounding group. 6. Use the Timing panel to ensure that the notification animation occurs before the group animation. You can also add a delay before the group animation to give the user time to read the notification. You might also consider selecting Hide before animated for the first animation and Hide after animated for the last animation (in the Animation panel). in5, FXL epub, PO. Interactive PDF does not support animation. 1.0 copyright 2017 Ajar Productions page 6 of 22

Bread Crumbs Bread crumbs give the user a sense of where they are in the site/app/document. They are typically hyperlinked so that the user can work backwards up to the top of the navigational structure. Bread crumbs are useful if your experience has a complex structure and you want to give the user a lot of flexibility to move around. How to Build Bread Crumb Navigation Bread crumbs can be created using text Hyperlinks or Buttons. If your document is unfinished, it may be easier to create Bookmarks to link to (as they hold locations as page numbers change). Tip: If you need to apply bread crumbs to multiple pages, create Master pages to save yourself time. You can always use a Master page as a starter with Hyperlinks, and override the text frame and edit the last crumb. You can also base Master pages on other Master pages to save even more time. in5, FXL epub, PO, PDF. 1.0 copyright 2017 Ajar Productions page 8 of 22

Progress Indication Giving the user a sense of progress provides motivation to complete the task. Progress indication can also give the user a sense of how much time is remaining. How to Build Progress indications is largely a blank canvas for you to work with. You can design it however you like. Examples include Software-style progress bar Check marks Numeric (e.g., 5 out of 10 steps completed ) Color (e.g., green = complete, gray = incomplete) You can also combine multiple strategies into one design. Tip: Create Master pages to save yourself time. You can always use a Master page as a starter with Hyperlinks, and override items for individual changes. You can also base Master pages on other Master pages to save even more time. in5, FXL epub, PO, PDF. 1.0 copyright 2017 Ajar Productions page 9 of 22

Achievement Achievement helps to motivate users and keep them engaged. This sometimes referred to as gamification. Achievement can be shown in many forms, e.g., Earning badges Fireworks animations to celebrate Showing points earned You can mix Achievement with other patterns, such as Progress Indication, Alerts, and/or Notifications. How to Build Achievements You can build achievement as pages that you send the user to, or as a state within an MSO. You can use most of the design patterns in this guide to indicate achievement. in5, FXL epub, PO, PDF as pages. in5, FXL epub, PO as MSOs. 1.0 copyright 2017 Ajar Productions page 10 of 22

Navigation There are so many ways to explore a digital experience. Just because you re designing in InDesign, doesn t mean your experience has to look and function like pages in a book. 1.0 copyright 2017 Ajar Productions page 11 of 22

Non-linear InDesign s interactive capabilities are vast. There s no need to limit yourself to a user experience that looks like a book and is read, page 1, page 2, etc. Non-linear navigation lets you guide the user down different paths, e.g., A path that is specific to the user s interest A section-based (i.e., topic-driven) path A functional path - the user takes action, the content on screen responds How to Build Non-Linear Navigation Non-linear navigation is more of a conceptual challenge; building the pieces with InDesign is quite easy. You can use Buttons with Go To Page actions or Hyperlinks. in5, FXL epub, PO, PDF. Note that many of these formats will still appear like books. in5 will give you the most flexibility in creating non-book-like navigation and appearance. 1.0 copyright 2017 Ajar Productions page 12 of 22

Tabbed Sections Unlike a print document, your digital document doesn t have to show everything at once. You can let the viewer selectively choose what is relevant and where to dive more deeply into your content. How to Build Tabbed Navigation 1. Create a content area and convert to a Multi-State Object (MSO) using the Object States panel. 2. Add multiple states and populate the content for each (can be graphics, text, interactivity, animation, and/or video). 3. Outside of the MSO, create a button to match each state and add a Go To State action. Tip: It may be faster to create a single button with an action already applied and copy-and-paste it several times, then update the actions on the newly copied buttons. The Extra Mile If you d like to create an active button state to indicate which tab is active, build the active state into the MSO so that it covers the clickable button of the current state. Online example. in5, FXL epub, PO. Interactive PDF cannot be used because it does not support MSOs. 1.0 copyright 2017 Ajar Productions page 13 of 22

Drop-down Menus An expandable menu is a great way to collapse content that is only needed some of the time. Hiding the navigation helps the user focus on the content. How to Build an Expandable Menu 1. On a Master page, create an MSO with an empty state (see the Modal Dialog pattern for more details on this step). 2. Build the menu background and buttons inside the active state of the MSO. 3. Add Go to Page (or Next/Back, if you prefer) actions to each button. You may also want to add a Go to (empty) State action to close the menu when a navigational item is clicked.* 4. Add an action to trigger the hiding and showing of the menu. If you have a single toggle menu button and a two-state MSO, you can use Go to Next State. 5. Apply the Master page to the pages where you want the menu to appear. * Yes, a button can have multiple actions. :-) The Extra Mile You can also create a sequenced animation within the menu state of the MSO to visually build the menu onto the screen. in5, FXL epub, PO. Interactive PDF cannot be used because it does not support MSOs. Tip: If you absolutely have to create a PDF-compatible version, you can use hide and show buttons. 1.0 copyright 2017 Ajar Productions page 14 of 22

Dynamic What if there were multiple ways that your user could navigate through your design? Rather than give the user a mess of navigational instructions (e.g., if you want to learn about Topic A, click Button A, if you want to learn about Topic B... ) make the navigation itself dynamic, and only show the option that is relevant to the user. How to Build Dynamic Navigation This type of navigation is primarily a conceptual challenge and not a one-size-fits-all option. Here s an example of one way to create dynamic navigation. 1. Create an MSO with multiple states and a button inside of each state. The buttons are identical to each other, except that each button will send the user to a different page. 2. Create option Buttons and add Go to State actions to each button, so that when the user selects an option, the MSO state will change and the underlying button destination will silently change as well. The user doesn t need to know this change is happening, it will simply create a better experience that is tailored to the user. in5, FXL epub, PO. Interactive PDF cannot be used with MSO version, but would work with hide/show buttons. Note that many of these formats will still appear like books. in5 will give you the most flexibility in creating dynamic navigation, because your output doesn t have to look and feel like a book. 1.0 copyright 2017 Ajar Productions page 15 of 22

Accordion Menus An accordion collapses information so that one panel of content can be read at a time. This frees up valuable space on the rest of the page. How to Build Accordion Menu The steps in creating an accordion are very similar to creating tabbed sections. An MSO is used to selectively display content, but because the buttons move with each state, the buttons need to be inside the MSO itself. Moreover, you have re-add the Go to State actions to the buttons inside of each state, since they are unique. The Extra Mile You can also create sequenced animations within the accordion states of the MSO to visually build the content onto the screen. in5, FXL epub, PO. Interactive PDF cannot be used with MSOs. 1.0 copyright 2017 Ajar Productions page 16 of 22

Visual Exploration There are so many ways to display content when user interaction is available. Give users options to explore their interests in depth, and skip the parts that are not relevant to them. 1.0 copyright 2017 Ajar Productions page 17 of 22

Zoomed Graphic A zoomed graphic is another way to save space on the screen, but allow the user to get more detail. Think of it like a multi-state pop-up. How to Build Zoomed Graphics 1. Add the base graphic to your layout. 2. Create a grid of invisible buttons over the top of the base graphic. 3. Create an MSO from a zoomed-in copy of the graphic. 4. Use the frame of the zoomed-in object to mask the image so that it looks like a larger version of a single cell in the grid (built in step 1) is displayed in your MSO state. 5. Create an empty state. 6. Re-select the graphic state and add a Go to (empty) State action for both Click/Release and On Roll Off events. This action will return the graphic to the zoomed out view. 7. Duplicate the state, and then adjust the framing of the image in the new state. 8. Add On Roll Over events to the invisible buttons and match the Go To State events with the corresponding zoomed-in state. in5, FXL epub, PO. Interactive PDF cannot be used with MSOs, but you might be able to create a show/hide alternative version. 1.0 copyright 2017 Ajar Productions page 18 of 22

Thumbnail Gallery The thumbnail gallery lets users browse many images on a single page. How to Build a Thumbnail Gallery While it can look quite different, building a thumbnail gallery is functionally the same as tabbed sections (see the Tabbed Sections pattern for detailed steps). in5, FXL epub, PO. Interactive PDF cannot be used with MSOs, but you might be able to create a show/hide alternative version. in5 can easily create a gallery from thumbnails for you. in5 also supports the Slideshow Overlay, which lets you autoplay through the different images. 1.0 copyright 2017 Ajar Productions page 19 of 22

Scrolling Frame A scroll-able frame lets you keep long content to a contained space. How to Build a Scrolling Frame 1. Download and install the Universal Scrolling Frames extension. 2. Restart InDesign after installation. 3. Choose Window > Universal Scrolling Frames. 4. Create a rectangle container for your content. 5. Use the Edit > Paste into command to insert a text frame or group into the container frame. 6. Export with a supported format. in5, FXL epub, PO. 1.0 copyright 2017 Ajar Productions page 20 of 22

Additional Online Learning Learn more about using InDesign for digital publishing (free course). InDesign as a UX Prototyping tool (video course). in5 Video demos (with source files). Free demo of in5. Final Thoughts As you can see from the patterns in this guide, InDesign has incredible interactive capabilities which you can tap with your visual skills. Have you thought of another pattern or created something awesome from this guide? Send me a note I d love to hear from you. 1.0 copyright 2017 Ajar Productions page 22 of 22