1

I have the following requirement for an iOS 8 app:

  1. I have a list of groups in the main view
  2. Selecting one of the groups takes you to the group's view (one level down the navigation stack)
  3. Every group has multiple sub-groups, and so you'll have the list of sub-groups for every group
  4. Selecting one of the sub-groups takes you to the sub-group's view (another level down the navigation stack), which is the final view

iOS's typical navigation with the back button is fine for first level of navigation, but I need the list of sub-groups and the content of a sub-group once selected to be right there in the group's view with the group's header visible, so the user doesn't lose context of the group and also so that selecting a sub-group and switching sub-groups are a maximum of 2 taps away.

How would you design this in a simple intuitive fashion (cues from material design or any other design paradigms are great as well!)? Help is much appreciated!

Edit: I also need to put in controls for adding/editing sub-groups, but they don't need to front and center; they could be stashed away a couple or so taps away, as long as the segue seems intuitive enough.

  • What sort of content is displayed at the lowest level, when a sub-group is selected? How much? – Matt Obee Feb 13 '15 at 16:57
  • @MattObee Its similar to Facebook's wall – a long list of status updates with photos/videos etc – John Doe Feb 13 '15 at 17:07
  • OK, so an accordion, with the selected sub-group expanded to reveal its content, wouldn't work because that feed can be infinitely long. – Matt Obee Feb 13 '15 at 17:13
  • Oh yeah; that wouldn't work @MattObee for the reason you mentioned. I've also added an EDIT to my original question: I also need to be able to show controls for adding and editing these sub-groups – but these controls don't need to be front and center; they could be a couple or so taps away. – John Doe Feb 13 '15 at 17:25
  • Wow that's asking a lot from a mobile device. :) – DaveAlger Feb 13 '15 at 21:06
1

This flow can go into three screens: group list, group view with group metadata and a sub-groups list, sub-group view with metadata and a feed of content.

A material design plus icon can store all additional functionality like editing, exporting etc, or if there's only editing, use the edit icon in the same place for editing the group description, image, list of sub-groups.

enter image description here

-1

You really need to streamline your architecture for mobile. What works on desktop does not necessarily work on mobile. Find your key features, call to actions and group content into categories that only mobile users will need. That should reduce your complexity and make the app more streamlined to key activities.

  • This isn't a complex app at all, and what you're saying sounds a lot like "remove functionality for mobile" which isn't generally a good approach. This app is about browsing groups news feeds, so the key feature IS group organization. – PixelSnader Aug 3 '15 at 15:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.