With the smaller screen area and a user context that can be varying a lot we need to prioritise and group content to only show what is important at a given time. The cognitive load of a user on a mobile device is high (notifications, calls, being on a subway, carrying a bag) as it is and we need to minimise their effort to conclude a task.
When designing for hybrid, strip down the content to the essential information the user needs in order to finish their task. Remember the context the user comes from and where they are heading. Structure content to guide the user through the process. Position important elements at the top, less important at the bottom and buttons close to the thumb. Elements, such as zone 3 should not show. When information is needed it can be shown in three different ways, depending on the level of importants.
- When necessary a question mark/information icon can be used for the user to read and understand more. Keep the text as short as possible and allow the user to read more elsewhere if they want to. If information is related to a certain element in the view it can be shown in a pop-over, a question mark/information icon shouldn't show for those but rather we should use a more subtle look that doesn't compete with the rest of the UI.
- If information is critical to the user or needs to be present due to legal reasons it can be shown. Keep the text short and show it in the relevant context. If a longer text needs to be shown, the information should open up elsewhere, slide-up sheet or in a browser.
Scale from All content to Essential content
Desktop -> Mobile Resonsive Web -> Hybrid