Weekly UX fight 2OSs 1app 0mercy
Rossmann
<
Fight #10
Main Screen I like that Rossmann pays attention to the characteristic features of each system. On iOS the slider seems to be built as one element with light separators between products. Nice.
I would reconsider the position of category label and align it left instead of right.
This is not Android search bar. No rounded corners and no shadow - maybe this is there reason that the bar seems a bit too narrow.
vs.
Elements with possible action placed on separate cards - thatâ&#x20AC;&#x2122;s Android đ&#x;&#x2018;? This kind of CTA is not native Android pattern though.
#weeklyUXfight #MobeeDick
Navigation Account information on top of the drawer, that’s Android!
Navigation drawer is not Human Interface pattern. It just isn’t. On iOS the worst case navigation-scenario is when you have more than 5 tabs, then the last tab become “more” tab.
vs.
Dear all, this is the first app in Weekly UX fight, where Android and iOS have both bottom navigation and navigation drawer… Well, nothing to be proud of.
The drawer slides over the main screen, not pushes it - exactly what Material Design recommends.
The drawer is a bit too narrow, though. Material Design guidelines contains a detail description of sizes and distances advised. #weeklyUXfight #MobeeDick
Product details Oh, this is something new! But not wrong, as a matter of factâ&#x20AC;Ś
Rossmann on Android contains icons, which mostly belong to Material icon set. Thatâ&#x20AC;&#x2122;s nice.
vs. At least not in this state - toolbar, an iOS pattern customised here. I think I like it!
Sticked bottom bar with actions Quite an unusual pattern. Definitely not taken from Material Design guidelines. Is it useful? Maybeâ&#x20AC;Ś đ&#x;¤&#x201D;
The default toolbar design is not in line with Human Interface guidelines though. #weeklyUXfight #MobeeDick
Dialogs Seriously, why such thing? It is something that seems to be somehow in line with guidelines, butâ&#x20AC;Ś not exactly. It could be quite okay, if displayed on full screen. And this button? so small as if it tried to hide đ&#x;&#x2DC;ł Native picker. Looks a bit weird with only two elements, nevertheless correct.
Rossmann definitely tries to apply native patterns, but sometimes it justâ&#x20AC;Ś does it wrong.
vs.
Drop down menu in default state should correspond to active state - at least in terms of font size. Also, the arrows down does not expand the menu element, but actually take us to new screen. Okayâ&#x20AC;Ś so looksâ&#x20AC;Ś ungooglish. Why not use dialog pattern? #weeklyUXfight #MobeeDick
To sum up At first sight both systems are quite in line with systems’ guidelines: tab bar and bottom navigation, sliders, cards, icons…
>
But the deeper I got in my exploration, the stronger impression I had, that Android version was built based on iOS one.
>
Small details of dialogs and lists, Toolbar in product detail screen which is a good solution considering Human Interface, but completely unnatural when we think about Material Design. All of this make Android version feel a bit like iOS…
Although it breaks my Androidloving heart, in the end I must say that iOS wins this time.
#weeklyUXfight #MobeeDick
And the winner is…
…
Take care!
{
Time to announce King of this series:
Let’s applaud to… iOS
Take care!
Hope you had a good time following Weekly UX fights Take Look forward to next series! Kasia Jezierska-Krupa @Kasia_JK @ kasia@mobeedick.com
care!