Add interactivity to your prototypes

It's now time to revisit your prototypes, and enhance them by adding interactivity.

Here are two common design patterns that make use of Javascript. Consider whether you can make use of either or both of these in your app.

Don't use Javascript for the sake of it. Consider user needs, and only use Javascript when it improves your app's usability.

Menus

Narrow mobile screens have less room for text and design elements.

It may be beneficial to hide your app's menu initially, and require users to tap a button to show it.

To use this pattern, your menu should be hidden by default, and you should offer a button that toggles the menu's visibility, like the example earlier in this module.

If using this pattern, pay close attention to how your design should change on larger screens.

You may need to write media queries to show and hide different parts of the page as the screen width changes.

Tabs

When showing lots of information about a topic, it's common to split that information into tabs.

A user can then choose the tab that's most relevant to them.

This pattern is harder to implement, but there are plenty of tutorials and examples on the web.