1

enter image description here 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")

enter image description here

  • 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.

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.

enter image description here

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.

enter image description here

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.

  • Fair points - I had forgotten to mention that my range selector only takes 50m increments which in my tests works well (in any case direct edits are an option). However, I note that there appears to be a consensus that "circular sliders do not work on touch screens". Labels... - I have always struggled with them. They often end up looking ugly, particularly as screen width increases – DroidOS Mar 21 '17 at 14:15
1

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.

1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.