What elements of this form should I consider changing

Question

Consider the form screenshot shown above. The context here is a hybrid app for Android (v 4.4+).

• The distance (50m) selector popups up a dialog with a circular slider going from 50 to 1000m, in 50m increments (i.e. 20 "ticks")

• The Current Address button uses the device GPS to enter the current location address in the address field
• The days of week selectors allow the user to select one or more days

The things I somehow feel could be improved/changed

1. The location of the Current Address button
2. Making the buttons - particularly the Delete & Save buttons flat

I am not a born and bred designer and I struggle to keep on top of current design trends so I hope that someone here might be able to give me some pointers.

Answer 1

If you are building for Android, Material Design should be your starting point. That will give you basic app structure, form layout, and color schemes etc. This will help in creating a consistent user interface.

Distance Widget

I guess you can improve the distance widget. The circular slider makes sense for something like degrees where the starting point (0) is the same as the end point (360).

Even a linear slider will not be advisable since your range is very high. From 50m to 1000m, your precision will not be very user-friendly. Furthermore, does your app need to be precise in the distance unit is a more important question.

You can have a set of buttons like following. But I would revisit the required range and the steps.

Location

For location, you can have a picker which tries to pick exact location using device location services. You can also have an editable input for adding a location, which will be autocompleted as user types in.

As I said, the Material Design guidelines will help you in polishing the content, but it will be good to have labels for each of the form element, including the days selector.

Hope I have helped.

Answer 2

You no need big "Get address" it is too big, but not main button on screen. Try to replace it with icon, and place it near adress field. Also you should try to get address aromatically., without touching anything. Circle slider doesn't work on touch displays.

Answer 3

First of all, congratulations on your efforts designing your UI/UX up to the moment. Two major considerations regarding workflow:

• always start simple and iterate designs continuously
• make at least ten designs of each asset a day
• do that until you meet the client's deadline
• otherwise do that until you meet your development deadline
• use a tool like sketch to do so.
• if you need to demonstrate the workflow use after effects to make some stop motion UI/UX prototypes

=======================

Regarding your work more specifically:

• turn the arrow icon less thick with down part as long as up part
• change the title "Edit Quiet Place" to simply "edit"
• change "New Quiet Place" to "New Location"
• remove locaton line and arrow
• replace "new quite place" by short-named-options
• turn all the text input lines into the same size
• center the lines horizontally
• get some thing like radius: (break) 50m instead of 50m radius
• turn "Get Current Address" to "get location"
• week days with three letters first one capital font and smaller font size (in a light font)
• remove shadows in boxes
• delete button background set to white and font black

second example:

• remove shadows
• circular dialed centered vertically
• stronger blue color (alpha channel similar to previous menu)
• small circle with black instead of white