Lego-ize it!

Written by sebastian212000 | Published 2017/02/25
Tech Story Tags: android | ux | android-development | android-app-development | design

TLDRvia the TL;DR App

Taking advantage of one of Android’s best features

I am not going to lie.

At least not for the next 5 minutes or so that it’ll take you to read this article.

My passion project is Looxie. I released this app in the summer of 2016 because I have this insatiable curiosity about what’s happening all around the world.

Bragging rights: Looxie got mentioned as one of the best five apps of the week on PhoneArena, Phandroid and AndroidWorld.nl

The basic function of Looxie can be described thusly: you tap on a (Google) map to place a pin on it and request a photo (with an optional description of what you want to see) from any users around that location.

The user can only respond with a photo that has been taken in real-time. So if you receive a photo at 9.53pm, you know that the photo was taken at that exact moment, only somewhere else in the world. That’s why my tagline for the app is “Your window to the world”. I am expecting a cease and desist from Burt Bacharach’s laywers anyday now.

When I started designing Looxie’s interface, I wanted to experiment a bit so I didn’t go for a Navigation Drawer as my primary means of navigation. And, in any case, the cool kids have decided that a navigation drawer is not a user-friendly navigation pattern. It’s all about bottom tabs this week, folks!

Instead, I went for the relatively “archaic” method of using the Dashboard navigation pattern, ie a list of actions you can take, right on the main screen of the app, like this

It’s pretty obvious, right? Tap on the action you want to perform, be taken to its screen and do what you want to do.

While I think that the screen itself is aesthetically pleasing, I never really liked it because

  • It looks like a screen from a spreadsheet app or something. It’s all business, no play
  • No action could actually be taken on this screen. Instead, you had to tap on an action and then, on the next screen perform your desired action or see the photos you received. One unnecessary step that adds friction to the app
  • As features got added to the app, they had to be added to this list, which grew larger by the day. On the screenshot above, there’s an item missing since you have to scroll to the bottom of the list to find the “Add Venue” action

My attempt to rectify this was what I called The Bulletin, a more approachable section at the top of the screen, with a grid of the three most recent photos taken around the world and an easier way to send requests either randomly or on the map. Here it is

Now it looks more like a photo-oriented app but it’s still a list. The cherry on top? I kept the list from the first screenshot below the new list / grid, for people used to the old interface (at least until I was ready to phase it out, which would happen gradually). You now had to scroll approximately two and a half screens to reach the bottom of the Dashboard and view all available actions. Not the end of the world but really unintuitive.

I now had the following choices

  • keep it as it is. Tempting but not optimal
  • completely redesign my user interface paradigm around something more appropriate, like (perhaps) a tabbed interface.
  • go for a drink or visit the toilet. Or go for a drink in the toilet. Tempting and optimal

And then a light bulb went off in my head.

A light bulb. Not the one that went off in my head.

How about I let the user design their own interface?

Android has this sweet concept called home screen widgets. Mini-apps, essentially, running on the homescreen, giving up-to-date information to the user. Another cool thing about them? They are interactive.

Widgets are kind of limited in what they can do (actually, mostly in what they can display). The main problems are these

  • Not all AdapterViews or View / ViewGroup subclasses are available to use. The main problem I see with this is no EditText support for entering text, although now that Notifications support instant replies and show an input field on the Notification (which is also a RemoteView, like a widget) maybe it’ll be made available on higher API levels. Just a theory.
  • trying to use custom fonts or do animations is an exercise in frustration and require hacks and weird workarounds.

These do not present a huge challenge to me, since I wasn’t really planning on doing animations on my widgets and I can live with using Roboto Condensed instead of Roboto Slab on them.

Now, I’m not here to write a tutorial on how to create widgets. The Android Developer site has a very nice tutorial on how to accomplish this, so hit dat link!

I am mostly here to outline my plan and maybe inspire you to use this pattern in your own app. So here we go.

Looxie features

Looxie has a

  • “Profile” section: it shows your likes, upvotes and the total number of points you’ve accumulated by sending photos to other users or entering venues in the database.
  • “Received Requests” section: when you receive a request for a photo, it goes in here. You tap it and you’re taken to a camera app to take the photo.
  • “Your Looxies” section: the last 10 or 20 (depending on your level) photos you have received from other users
  • “Become Eager” section: just a switch that, when on, tells other users that you are really eager to send a photo by making your dot on the map green. This was really easy to use, since it acted as a switch and didn’t take you to a different screen.
  • “Search Venues” section: instead of going on a map and placing a pin on it, you can go and search for venues by name, assuming that they have been entered into the database by someone (see “Add a Venue” below)
  • “Drop Pin” section: go on the map, place a pin on the area you’re interested in and request a photo from there
  • “Add a Venue” section: when you’re at a specific place, capture it by entering its name and type (bar / monument / shop etc) and make it searchable for others
  • On the Bulletin, you can see the three latest photos taken from users around the world, send a request randomly by tapping a dice and request photos from the most active users.

Most users use the Your Looxies, Received Requests and Drop Pin sections and also love requesting photos from the most active users through the Bulletin.

All these make sense, since they are what makes Looxie fun to use. The “Add a Venue” section is rarely used, even though the app awards you a point every time you capture a venue. Suckers! I bet you didn’t know that!

So imagine this: instead of forcing a layout on users and giving them options they may not ever use, why not let them build their own interface from modular components on their freaking home screen? Now, that is optimal!

My vision. No, not that vision. The cool one.

In my vision for this, you have a Bulletin widget, which shows you the six latest photos taken. Another widget can act as your gallery, showing a list of the newest photos you have personally received from around the world.

Go into another screen to respond to a request? LOL, are you nuts? Why not have a list of the latest requests on your home screen, tap those and be taken directly to the camera app from your home screen? Or have a 1x1 widget which lets you fulfil the latest request when you tap it?

A Profile widget can act as an always-present feed about your Looxie status on your homescreen. Another widget called Most Active users will let you tap on one of them to request a photo, again from your home screen.

And so on.

The best part? Don’t care about your profile and points? No problem, don’t place that widget on your homescreen! Don’t care about the photos sent to other people? Fine! Remove the Bulletin widget and add a widget that shows your latest photos.

In other words, allow me to Lego-ize the app and go build your own interface in any page of your homescreen from resizable components offered to you by me, your friendly neighborhood developer. Use what you want, discard everything else.

Sounds good? I am interested in opinions, as I’m really excited about the possibilities of this.

The only downsides I see are

  1. extra development work for me, which I don’t mind at all
  2. if someone ever ports Looxie to iOS, they won’t be able to port the home screen widgets modular interface paradigm. But who cares about those iOS plebs, right?

I have already started implementing my plan and the latest update includes the first of the planned widgets, called “Postcard”, the latest photo taken from a user around the world.

It looks like this

… and I’m so excited by it, I’m probably skipping sleep tonight! And yes, you can resize it, too

Go on. Resize all you want!


Published by HackerNoon on 2017/02/25