Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

When designing a UI for a mobile web application (non native) that is expected to run on iPhone, Android and possibly more platforms, what should be the baseline?

Would you design it based on iPhone standards? Android Standards? Or just select your own look and feel ?

How for example would you display a system message popup?

share|improve this question

3 Answers 3

up vote 3 down vote accepted

It's a web app. You don't pretend it's not. The general standards apply to most all touch devices (touch areas, relative screen sizes, etc.) but don't try and use actual native UI elements from either device as that's somewhat deceiving (it's not a native app) or just confusing (the UI isn't that of the device you are on).

As for a system message popup, you can't show that from the browser. So you have to build your own. You can leverage the browser's native JS alert and confirm pop-ups, or you can build your own modal window implementation using JavaScript.

share|improve this answer

When creating a non native app then you need to be very careful about including elements from another OS into the one that you've released on. For instance, if you're releasing on Android and iOS then don't incorporate elements from either.If Apple see an Android look-a-like app they won't approve it and if Google find and iOS look-a-like then you'll probably get asked to redesign it. You can however include elements that are common to both such as the slide out side menu if you do it with JQuery and/or CSS. You can however build two (or more) CSS files which will change the look of the app dependant on whichever device the app is on. You should also take into account that both OS's do things differently from each other and all other mobile OS's. Therefore creating all of your apps functions in JQuery or CSS is probably the best option.

As DA01 says it's not native so don't try to pretend it is. Users can find that somewhat confusing as it won't be able to do everything that a native app can, it'll probably be slower and it'll act differently to a native app. If they think it's a native app and it doesn't act or look as it should they'll probably one star your app on the market.

share|improve this answer
    
I think it's best to avoid imitating OS elements in nonnative apps period. It's decieving, and may give the user a feeling your site is connecting to their phone in more ways than they prefer. –  Eric Aug 12 '13 at 13:31
    
It maybe worth asking if making an app is be best idea for a project or if a mobile website would be better, apps are supposed to bring something unique to the phone that a website can't. –  KitP Aug 12 '13 at 14:10
    
The terminology is confusing, but it's a non native app, which is really a mobile website, viewed in the device's browser. I'm not 100% sure of the origin of calling them apps vs mobile sites, but I assume it's do with native apps existing to perform the functions of websites, and mobile websites having interfaces designed around touch and small screens, causing them to be nearly identical to their corresponding native apps in terms of interface. –  Eric Aug 12 '13 at 14:26
    
I thought you meant that it was built using a cross OS platform such as PhoneGap which acts like an app but is written in HTML or another web based language. These are, to my knowledge, released as apps in the app market but are little more than a website in a webview. I must agree the terminology is very confusing! If you're talking about a mobile website then I would have to agree that using any elements from the OS is a bad idea. –  KitP Aug 12 '13 at 14:35
    
My understanding is that native comes down to downloaded through an app store and installed to the hard drive, whereas non native is accessed through a web browser. I could be wrong, but here's a couple articles that specifically outline the differences. barefootsolutions.com/blog/… - sixrevisions.com/mobile/native-app-vs-mobile-web-app-comparison –  Eric Aug 12 '13 at 14:54

The big factors you need to consider are screen size, and the fact that you're on a touch screen. (retina/ultra HD image optimization's important as well, but only to the aesthetic, it's not essential to interaction).

Android and iPhone's standards are great for advice in terms of usability with small touch screens. Things like minimum icon sizes are things that should be taken seriously.

However, you don't want to imitate the graphic elements of the operating system, because as DA01 mentions, that's deceptive. It can confuse the user as to where they are (they should remember that they're just hanging out in their browser) and how much access your site has over their device.

Touch screen, screen size, and of course, how people hold and use the device, are the big factors you need to concern yourself with while developing a mobile interface. No need to emulate the graphic style of one brand or another.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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