We’ve been all using weather apps, and there is a ton of them out there. It is something that we check when we wake up, during the day and just before we go to sleep. Weather is important to us.

The Weather App

We created a Weather App using Mobiscroll components to demonstrate how you can make something used this often fun and efficient. Two components were used to build the UI, the Mobiscroll Listview and the Mobiscroll Select Scroller.

Within the demo you can build a list of cities displaying the local time and temperature.

The Listview lets you easily render the list and comes with gesture support out of the box. It’s just a matter of configuration.
The app displays the list of selected cities and a toolbar with three functions. The icon on the left is for switching between Celsius and Fahrenheit. The icon in the middle will refresh all information displayed.

Adding cities

To add a new location, you just need to hit the + icon and a Group Select will show up.
There is no need to type in a city name. Mobiscroll Group Select allows you to find the target location by quickly scrolling through the state and city wheels. For demonstration purposes we’ve added ten cities for each state, which means we have 500 Cities in total. We could have gone with a long select that can hardly be navigated or group the cities by state.
A regular html select with optgroups is in the background and Mobiscroll takes care of the rest.

Reordering

Reordering is just as easy as moving paper cards on your desk. You do not have to enter into edit mode and drag the items from one end. It’s better than that. You simply tap, hold (for 250 milliseconds by default) and start dragging it up and down the page. This visual feedback is showing that the reordering function is active and the item is dragged.

The Gestures

If you wish to refresh one specific city’s temperature, you can slide the item to the right until the refresh icon appears. At that point we call the Weather API and update the value on the UI. Both sliding and swiping works.

To remove a city, slide the item to the left until the delete icon appears.
You don’t want to accidentally delete a row. To avoid that we have the built in “tap to confirm”. This means there is an additional tap needed to confirm the action. To cancel just simply click outside of the delete.

The sliding/swiping and reordering gestures are built in which make managing items easier, quicker and are reducing friction.

Sliding items left and right is more intuitive and easier to perform than opening menus and sub-menus for the desired operation.

What to do next?

Try the Weather App
Delight your users with an amazing user experience and let us know what you think in the comments!