I am developing an application which has a website and a mobile app (iOS and Android). On a particular page, A pop-up contains a "x" (close) button on the top right. I do not want the same design for the iOS app. Is it okay to have a different design for the pop-up on the website and the pop-up on the mobile app version?
Design could and should be different aligned to platform guidelines and specifics.
Here I refer to UX planes which are presented by J.J.Garrett in The Elements of User Experience and try to describe the reasons of differences in design. I include in design all the planes, not only visual design (surface plane).
So, the differences in design:
- Could be – for example, as part of strategy or reduced functionality or some other differences considering device features and constraints.
- Should be – it's obvious there are differences in layout at desktop and mobile in most cases. Moreover each platform has its own guidelines conserning interface design principles, controls and interaction patterns (Android, iOS). So designer should apply them to create platform-consistent product.
I think the main message that the pop-up is showing is more important here. The pop-up will definitely have some " OK/Cancel" button(I hope). So, in that case that will be sufficient to interact with.
The message will be conveyed to the user via the pop-up. So, the user will always be viewing the main message rather than the close button orientation. You can use the OS specific orientation of close buttons,no doubt, but it may not be very much required I guess.
This will help you, I think.
I concur with Alexey. Design should be different for the website and mobile, especially with reference to the scenario mentioned by you. There are different information architecture guidelines, design guidelines, platform specific guidelines when it comes to mobile and you should definitely be aware of these while developing the app rather than mimicking your website. Remember "Mobilize, Dont Miniaturize"! That being said, to maintain brand identity and consistency in the site and apps across platforms, it is advised to stick to the same theme when it comes to UI. (Custom icons, logos, color, etc)
I found these articles really useful when I first started designing for mobile:
Hope these help!
As I understand it, the dialog would be a custom one with an 'X' on the corner.
As much as possible I would go with having a consistent "look-and-feel" across platforms, with the "feel" part changing in instances where it necessary to follow the platform's design guidelines.
A good example would be the Twitter website (including mobile version), and its apps. As you might notice, Twitter defined a consistent "look-and-feel" that would associate the app as belonging to Twitter, yet follows each of the platforms design guidelines and rules.
Another example would be foursquare.