iOS porting Android -> iPhone - need your opinion on UI layout choices (TOP TABS etc)

[alexmobile]

Hi guys,

I am a new member here and I need your advice... I am porting my Android app to the iPhone and I have a dilemma on how to layout UI elements. Frankly, I am quite happy with how it has been laid out in Android app (please see the screenshots attached). It is simple to code, functional, and looks good enough for me.

However, I need your advice before I run myself into some troubles like Apple not approving my app for violating their UI guideliness or something like that. I do not think it will violate, but still want to hear your opinion.

So here are my questions:

1) Tabs on top - I know I cannot use standard iPhone UITabBar, so I will do some custom image-based tabs and place them at the top like in Android. Will apple ban my app just for the "fake tabs" at the top?

2) Is it possible that iOS control would automatically render for me the smooth gradient transparency change on the scrolling edge - see the Details screen at the bottom, the "scrolling edge" is a "border line" between "Back" button panel and main part of the screen. In Android, that effect is provided for you automatically by standard system controls. Could you please give me some tips as how to achieve that effect on the iPhone?

3) If I will NOT use UINavigationBar at all, but rather use that same "Back" button at the bottom of 2-nd screen - will that be too much annoying from the users prospective?

P.S. I've red some discussions as to what is better location for Tabs (Android has top tabs and iPhone has bottom tabs positions by default). I agree with both sides having their pros and cons. I would gladly put the standard iPhone tabs at the bottom, to make it more aligned with many iPhone apps, but that will likely cause so many other changes in the layout of my simple 2 screens, like
- where to place Company and Domain Type selectors? At the top? not really, will probably have to move them to the bottom too, and place them just above the bottom tabs. Well, for some reason when I try imagine that final layout, I do not like that idea
- also,"Refresh" button on the first screen would lose its consistency with "Back" button on the second screen. With the top tabs it all look simple and functional. Bottom tabs would present a new challenge to already "solved" app layout if I could say that ...

If you care to comment, I am glad to listen to your take on it!

Thanks, and
Happy Xcoding

 

[jiminaus]

Porting is more than substituting OS-specific function calls.

Don't replicate the Android look and feel. Redesign the UI to match Apple's iOS Human Interface Guidelines.

 

[firewood]

You should change your UI to match what iPhone users are used to seeing, or else your app will just look strange or ugly to your potential iPhone customer base.

So read the iOS HIG, and move your tabs and back buttons into standard Cocoa Touch positions and UI classes. And simply lose the Android eye-candy effects (add some iOS animations instead, if you want eye candy).

 

[ViviUO]

Is there any particular reason why you can't use a UITabBarController? If there is nothing technical from stopping you, I would use it in it's normal spot at the bottom of the screen for your iOS version. Like the other replies here, you want to stick as close to Apple's HIG as possible.

There are plenty of apps that have both an iOS and Android version where the UI's are different, but similar.

 

[alexmobile]

@jiminaus:
thanks for the link, I did read it few days ago but only finished the "iOS UI Element Usage Guidelines" part which goes about describing all standard CocoaTouch controls one by one. You actually reminded me that there is more stuff to read there.

@firewood:
"...You should change your UI to match what iPhone users are used to seeing...."

I guess you are right and I will have to redo the app layout for the iPhone from scratch... Tabs at the bottom, etc... The only problem with that is I am totally out of clue how would I preserve at least some of the app branding... Well, back to the drawing board again... I would appreciate some tips / ideas on how to preserve at least some resemblance between iPhone and Android versions.... Well, could keep the same color for tabs and background. Not sure how transparency would fit with Cocoa controls... I will probably post a mockup here so you guys could provide some critique. I don't have much experience as an iPhone user, that is part of my problem too I have not seen as many iPhone apps as you have

@ViviUO:
"...There are plenty of apps that have both an iOS and Android version where the UI's are different, but similar..."

I was just hoping to avoid going back to the drawling board, but based on the collective feedback you guys provided here, I am realizing that I would seriously annoy my future users if I would place the tabs at the top. And annoying my users is the VERY LAST thing I want to do, even for the FREE app. I cannot be that ignorant So it looks like I am going back to the drawling board.

Thanks guys!

If you have got some tips on how to preserve branding while going with Cocoa controls... please share!

 

[ViviUO]

Well, based on your screen shots, I would do the following:

SS#1

Move the tab bar to the bottom of the screen, while pushing everything up to compensate. You might consider a UITableView to display your data.

SS#2

Use a navigation controller, perhaps. Then push everything else down. You could probably get away with just using a button here as well, though.

 

[alexmobile]

Hey guys,

I have put together some really lame mock of my upcoming iPhone app ... Basically just hacked together few bitmap images from various apps ...

Would you care to post your opinion / suggestions? Thanks!

P.S.
@ViviUO:
thank you for your comment! I just noticed it now while posting this... For the Screenshot #1, I did almost exactly what you have suggested - pls see attached screenie. I am not yet 100% happy with that screen, I would say 70% happy. But it is not too bad even the way it is now. However, I would not give it any UI design award at this time. Shiny glossy iPhone NavBar does not feel 100% right with that FLAT transparent Android data table and MATTE android buttons. Maybe once I put there more glossy iPhone buttons - maybe then it will come together. So now my biggest problem is how to solve this MATTE vs GLOSSY and FLAT vs 3D issue. Basically, I need to make my data table more GLOSSY... Any idea on how to make that transparent .PNG background table row more glossy / 3D ? Thanks for your feedback!
...
...