iOS What navigation pattern to use for this iOS app?

[salc]

Hello macrumors forum!

I'm developing an app that follows the model of the Android app - Google I/O 2014 (https://play.google.com/store/apps/details?id=com.google.samples.apps.iosched).

The navigation will be something like this - Main navigation is in the navigation drawer, and the action bar consists of 3 filters to filter the content.

Here are two screenshots of the Google I/O app -

So my question is: how do you think I can translate this navigation to an iOS app? I don't want to do something completely out of the ordinary for iOS users. I'd like to use common navigation, if possible.

Any thoughts? Thanks a lot!

 

[Ubuntu]

Hello macrumors forum!

I'm developing an app that follows the model of the Android app - Google I/O 2014 (https://play.google.com/store/apps/details?id=com.google.samples.apps.iosched).

The navigation will be something like this - Main navigation is in the navigation drawer, and the action bar consists of 3 filters to filter the content.

Here are two screenshots of the Google I/O app -

Image

Image

So my question is: how do you think I can translate this navigation to an iOS app? I don't want to do something completely out of the ordinary for iOS users. I'd like to use common navigation, if possible.

Any thoughts? Thanks a lot!

While it's difficult to say as I can't get my hands on the Android app to play around with it I might suggest that the top level navigation be a tab bar (with items like "Design" and others, if there aren't too many of them as I find tab bars become counter-productive with too many items) and then perhaps I would have the Filter/All Topics be a separate viewcontroller that is presented in a modal fashion - accessible via a button in the navigation bar at the top.

I know this isn't as subtle as just having dropdown boxes like in the Android app but I see this quite often in iOS - take a look at the WWDC app on the app store if you can for a good example.

Also, I'd really recommend checking out the Human Interface Guidlines if you've not had a look yet. The UI Design Basics part can help if you need to familiarise yourself with iOS in general, but the "Design Strategies" section will help you break down the features of the app and then help you determine the best approach to take.

 

[salc]

While it's difficult to say as I can't get my hands on the Android app to play around with it I might suggest that the top level navigation be a tab bar (with items like "Design" and others, if there aren't too many of them as I find tab bars become counter-productive with too many items) and then perhaps I would have the Filter/All Topics be a separate viewcontroller that is presented in a modal fashion - accessible via a button in the navigation bar at the top.

I know this isn't as subtle as just having dropdown boxes like in the Android app but I see this quite often in iOS - take a look at the WWDC app on the app store if you can for a good example.

Also, I'd really recommend checking out the Human Interface Guidlines if you've not had a look yet. The UI Design Basics part can help if you need to familiarise yourself with iOS in general, but the "Design Strategies" section will help you break down the features of the app and then help you determine the best approach to take.

Thanks for your reply!

I've read the iOS Human Interface Guidelines before (for fun - I think it's amazing!), but I re-read this section. It didn't really help much, in this case.

I saw the WWDC app as well, but it seems there just aren't as many filters in the app.

Basically, the filters I have will be 1-Subject, 2-Unit, and 3-Exam.
Subject will have 3-5 options, Exam will have about 5, and Unit will have >10. So I think it's clear I can't use those segmented tabs at the top

 

[Ubuntu]

Thanks for your reply!

I've read the iOS Human Interface Guidelines before (for fun - I think it's amazing!), but I re-read this section. It didn't really help much, in this case.

I saw the WWDC app as well, but it seems there just aren't as many filters in the app.

Basically, the filters I have will be 1-Subject, 2-Unit, and 3-Exam.
Subject will have 3-5 options, Exam will have about 5, and Unit will have >10. So I think it's clear I can't use those segmented tabs at the top

To me that sounds like it would be similar to the example shown here. If you play that example, it sounds like the Subjects would be where "Credit" and "Options" are in that diagram, then Exams would be where "Sound", "Music" and "Graphic" are, then Unit would be where "Classic" and "Custom" are.

What do you think of this?

 

[salc]

To me that sounds like it would be similar to the example shown here. If you play that example, it sounds like the Subjects would be where "Credit" and "Options" are in that diagram, then Exams would be where "Sound", "Music" and "Graphic" are, then Unit would be where "Classic" and "Custom" are.

What do you think of this?

But would you have to go through lots of taps for that? Also, it doesn't really keep that hierarchy glace-able, the way the filters do!

 

[dejo]

Here are two screenshots of the Google I/O app -

Image

Image

Your screenshots aren't appearing. Would you be so kind to try again, perhaps attaching the images to your post?

 

[salc]

Your screenshots aren't appearing. Would you be so kind to try again, perhaps attaching the images to your post?

It's working for me, but sure, I'll try again! Here are the links:

1) http://imgur.com/XwvmMB1
2) http://imgur.com/Mv40goJ
3) http://imgur.com/IULNMR4

Here is the link to the actual app, in case you have an Android device:
https://play.google.com/store/apps/details?id=com.google.samples.apps.iosched&hl=en


Let me know if there's any other confusion, and thanks!

 

[Ubuntu]

But would you have to go through lots of taps for that? Also, it doesn't really keep that hierarchy glace-able, the way the filters do!

Sometimes that's necessary. Consider the process of viewing an attachment in Mail when you have multiple inboxes, for example. That's Select an inbox > Select a message > Select an attachment. Such depth isn't something that's going to be out of place in iOS - the question is whether or not there's a more exciting & engaging user interface for displaying that content without sacrificing functionality.

 

[salc]

Sometimes that's necessary. Consider the process of viewing an attachment in Mail when you have multiple inboxes, for example. That's Select an inbox > Select a message > Select an attachment. Such depth isn't something that's going to be out of place in iOS - the question is whether or not there's a more exciting & engaging user interface for displaying that content without sacrificing functionality.

The difference between our examples is that in my case, it's important for the user to understand the context of where he is. After he chooses Exam and Subject, he shouldn't have to try and remember what he selected when he's drilling down to the chapter.