Weekly UX fight #4 - Listonic

Page 1

Weekly UX fight 2OSs 1app 0mercy

Listonic

<

Fight #4

Main Screen Typical Android patterns: hamburger menu, FAB and list of cards.

So‌ I feel kind of Androidish here‌ This card style brings to mind rather Material Design then Human Interface. Well isn’t this interesting: FAB on iOS‌ đ&#x;˜ł I have this unexplainable hunch, that Information Architecture could have been designed better here‌

vs.

It’s kind of empty here, nevertheless designed according to guidelines.

Correctly used more menu contains options for corresponding shopping list. #weeklyUXfight #MobeeDick

Navigation This navigation is really weird. Each item in different screen corner, Help on the main screen, Settings on the tab bar? Is there any reason for that? Well isn’t this interesting: FAB on iOS‌ đ&#x;˜ł Tab bar with only two tabs? No good! Human Interface Guidelines recommend 3 - 5 tabs.

Hamburger menu? No kiddin’ đ&#x;˜œ

vs.

Its elements are rather obvious, giving us clear overview of all app sections. As usually though, could be replaced with bottom navigation. This button with scarily huge number (It really is discouraging!) takes us to Offers. I’m not sure I want to go there‌ Android FAB, which does exactly what expected - takes us to Add new list view. #weeklyUXfight #MobeeDick

Product search This is definitely not iOS design standard for a search bar.

At least tabs are consistent with Human Interface pattern‌

I have one major remark for both system‌ adding second item of a kind is completely unintuitive. Seriously, there are better solutions out there.

vs. Is the functional difference between tabs research-based decision or just sloppiness?

Android search bar also doesn’t follow Material Design guidelines perfectly (there is no need to double ‘OK’ function, that’s already built in keyboard), but still it’s better than iOS‌ Tabs follow Material Design guidelines both in terms of graphic design and interaction (slide transition by swipe gesture). This is why it’s worthy to use dev patterns Android offers. Well done! đ&#x;‘? #weeklyUXfight #MobeeDick

List view List view is clean and clear, with nice colourful icons representing types of listed products. It’s a bit empty here, though. The back button lacks description, that would make information architecture more transparent to the user.

But I believe this icon in iOS is dedicated for tab bar, not more menu.

Wow… That’s a lot of icons there.

vs.

Frankly speaking I cannot find a reason to put this vertical line on list item… Should this imitate a notebook or sth…? Yaaay! Cooking tips with products I have on the list ❤ And some other useful on boarding tips, nice!

#weeklyUXfight #MobeeDick

To sum up When it comes to iOS version of Listonic, there’s no sense in even trying to search for Human Interface patterns here. Not only there are almost no iOS characteristic patterns, but in addition to that there are Material Design patterns used (FAB). This is completely undesirable, especially for iOS hard users. Also, iOS version lacks some functions comparing to Android.

>

In fact, I would hesitate to call it even an iOS app‌

>

In Android version of Listonic Material Design can be felt almost everywhere. Starting with application main screen where one can see Floating Action Button, Material Design cards and navigation drawer (AKA hamburger menu), going deeper to Settings with Android toggles and lists, ending with “Add itemâ€? view which uses tabs to organise the content. There are some patterns that are completely not consistent with Android guidelines, but it is fair to say, that Listonic did the job đ&#x;‘?

#weeklyUXfight #MobeeDick

And the winner is…

…

Take care!

See you next week!

Kasia Jezierska-Krupa @Kasia_JK @ kasia@mobeedick.com

{

Next fight requests? Comments? Let me hear them!

Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.