You can add dynamic content and advanced interactions to your user interface design. Rich Interactive Wireframes: Create rich website wireframes without a single line of code. Gestures Simulation: Add swipe, tap-and-hold, pinch, and rotate gestures in your wireframe and even simulate responsive design. In this post we will talk about UI patterns called the launch screen, the tray and the list.Design web and mobile applications with Rich Interactive Prototypes. These patterns are used to improve user experience and give designers more options to work with, specially if project is content heavy. Launch is a screen that appears when the application is opened, and it usually shows the company logo and nothing else. It is used to reinforce the branding for the app. It also allows the app to load in the background while the launch screen is open. This screen is not to be confused with the home screen as it is not a screen you can go back to once you are already in the app. The tray area is also referred to sidebar, hamburger, draw or off-canvas layout. It is an extension of the user experience and should be used as a complement to the experience. The user must tap or slide to access this tray and navigate through the items. Usually, the tray icon is shown in the page as a hamburger menu, the user’s profile picture or a custom icon. These icons are used to open and close the tray. This element should contain design elements that makes it clear to the user that it is clickable and they can interact with it. Make the button look different when it is touchedĪvoid making the tray too complicated, keep it clean.Make sure it is large enough for a finger.Make a button look it is part of the navigation.This pattern is great to display menu options, tools, profile settings, log out button and more. Utilise short names for the topics and don’t add other gestures. Another tip is to avoid multiple scroll pages, it is best to keep it to a maximum of 2 screens. It provides basic navigation to second and third level pages, expending details for a content section, enlarging images and opening screens or options. It is made from 3 main components: the list item, the navigation bar and the navigation buttons. The design should be consistent across all pages, providing wayfinding for the user as they explore the app. Every page, as the user goes further in navigation, should contain a “back” button to go back to the previous page. The hamburger menu is an icon made of three horizontal lines parallel to each other used in websites and applications to ‘hide’ menu options, settings and other information. There are some debates in the design world whether the hamburger menu is efficient or a mistake. Accordingly to Joseph Downs (2020), “It all comes down to the sequential vs direct access debate. Sequential access involves the user discovering elements and content in stages which usually require some output on their behalf. On the other hand, if we allow our users direct access, it means that they see the content or link they want to click on immediately”.Īlthough there are other options to avoid the hamburger menu, this pattern is well accepted by users as they already know it is a menu when they see the 3 lines and what it is for. Hamburger menus are great to hide secondary features or subcategories that are not so important as the rest of the website/app content. It also declutters a page saving screen space. On the other hand, when the options or settings are important to the user experience, when the page already requires a lot of user interaction or when it would hide native navigation, the hamburger menu should not be used.Ī few options to use instead of the hamburger menu are:Īdd a navigation tab with text or icons so the user can quickly switch between screens. If the menu has more than 4 or 5 links, add a “more” option with a dropdown menu to support the other links.Ĭreate menus that collapses as the size of the screen changes, offering a “more” options at the end of the menu that hides away more links as they ‘disappear’ due to the screen width becoming smaller.Ī navigation tab that allows users to scroll vertically to unveil more options.
0 Comments
Leave a Reply. |