Long Forms CAN be Sexy

How we improved the UX of dubizzle's "place an ad" process

In 2013 I left sunny Brazil for even sunnier Dubai to help crafting the front-end of dubizzle’s new place an ad process— a behemoth with more than fifty pages, seven different routes, and dozens of entry and exit points accessed by millions of users.

How to turn this endless user flow into a seamless, enjoyable experience?

Given the flow size, user experience was a top priority. We put quite a lot of effort polishing the interface and adding bits that completely changed the interaction.

A word about details

One of the most rewarding aspects of front-end engineering is delivering a remarkable user experience — something achievable only through obsessive attention to detail.

Details are a hidden language: they tell the audience how passionate you are about your product and how much time you invested in it. They reward the power users who explore its features. They add character and personality. Details tell a story.

I’d like to showcase a few of the nice little subtleties that helped turn the endless, laborious task of placing an ad into something quite pleasant. Props for @hotsawz for coming up with so many of them.

The Yalla Button

Users are greeted with a multi-language button and a handy show/hide password feature in the login screen.

Dubai is arguably one of the most cosmopolitan cities in the world, with almost 90 percent of its population consisting of expatriates. We welcome them with the so-called “Yalla Button” — in English, Hindi and Spanish as well.

A handy show/hide password widget is also there for accessibility purposes.

You ain’t no dinosaur!

The dinosaur page managed to reduce IE8 usage by almost 50 percent in a matter of four days.

Internet Explorer 8 had an alarming 5.6 percent usage share, so we took action.

The dinosaur page managed to drop this figure to 3 percent in a matter of four days by scaring old IE users to death.*

*The dinosaur is not actually real.

CODI knows all

CODI does the hard work of guessing the category of a listing based on its title.

Instead of delving through categories and subcategories, CODI guesses where a listing should be placed based on its title.

The user is then presented with a few guesses and the option to manually pick a category.

Nice natural language processing built by @danwald.

Responsive Float Label Pattern

The float labels go from inline to stacked as the viewport gets smaller.

Matt Smith published what was coined as Float Label Pattern. Before that, we came up with a similar solution.

The difference is that the labels adapt to different resolutions.

Regardless, props for Matt for publishing about it and for sharing a neat JS implementation. ❤

This was featured by Vitaly Friedman at ColdFront 2015.

Behaviour prediction

Toggling two items expands the “extras” list.

If the user ticks two items in the extras section we can safely assume they are willing to go through the whole list, so we expand it.

The fourth list item is precisely cut in half to give a clear notion that the list is longer than that.

It’s not my fault

Some mobile browsers crash if an user tries uploading large files. As preventing the user from trying things is a bad idea in general, we detect the file size and kindly inform them we’re gonna try our best.

A kind note to the user informs him that he’s trying to upload a large file that could crash the mobile browser.

Quoting dubizzle’s design principles:

Be gentle in how you prompt people to make corrections. They wanna feel smart so if something goes wrong, give clear recovery instructions but spare them the technical details. If you can fix it behind the scenes, even better.

Locate on a map

The crosshair slides to the center of the map and serves as a guide.

There's quite a lot going on in this one.

  • The “Locate on a map” button collapses and the map slides down from the top of the viewport, full-screen.
  • We pre load a map image featuring Palm Jumeirah for context — the real map is loading on the background.
  • The dummy map fades out and the real one appears, showing the same location. The famous landmark helps as a starting point in case the geolocation API fails.
  • If we get the user’s location, we pan & zoom the map to it.
  • During all server requests (like the one above) the crosshair becomes light gray and starts spinning. While dragging, the crosshair becomes dark gray.
  • Dragging the map is more precise, but just in case, the clicked/tapped point slides to the center of the viewport, so it also works.
  • Pressing the browser back button closes the map — always offer an easy exit route with modals.
  • Selecting a location on the map will also update the Neighbourhood field, so we highlight it for context once the map is closed.

Are you scuba diving?

Trying to place your ad in the sea or out of the UAE will give you funny warnings.

If a neighbourhood is not found in the selected point, we calculate its altitude and display “Are you scuba diving?” for sea and “Lost in the desert?” for land.

In case the altitude service check doesn’t work, we serve, “Do you need a GPS?”

The crosshair once again serves as additional feedback.

With cream on top, please!

A subtle coffee mug icon, powered by SSPika.

A coffee mug icon can be seen in all custom packages that require negotiation with dubizzle’s sales department.

It tells the customer dubizzle’s staff is friendly and open to talk.

“It’s just a form!”

…said one of my colleagues, as he couldn’t understand why the project took so long to be completed. Maybe that means we reached our goal.

Thanks for reading this far! If you liked what you just read, I’d really appreciate it if you could give it a little clap :)

Also, follow me on twitter to know when I post stuff like this. Disclaimer: some occasional tech ranting might be seen. -> @joaocunha