0

I'm developing an Android app. The GUI is designed (and is implemented, but it can still change for the moment).

Questions

  1. The app will be used whatever the environment (bright or dark, etc.). The connection to the Internet is supposed to be fast. The smartphones are supposed to have medium or large screens (small are not very relevant for this app). How could I improve this GUI for such a display? (if needed)

  2. I feel that something is missing graphically to make the interface look better. In particular, the white block seems too empty. Perhaps a transparent gradient image from left to right that would go from the bottom of the red block to the bottom of the smartphone, and that would spread across half the screen? This image would contain many embellishments in red tones. How to make this GUI look better? (really needed!)

The GUI

enter image description here

  • 2
    In a word... contrast. – Scott Sep 27 '18 at 21:15
  • 3
    In two words... hire someone. – Lucian Sep 27 '18 at 21:18
  • 1
    please focus on asking one question. Your second question is too broad and opinion-based to answer. – Luciano Sep 28 '18 at 8:56
2

I didn't really want to answer, but I just blurted out everything I had to say about it in a comment and it got too big. I wrote this on mobile late at 2 am so it may be a little whatever. I may come back to clean it up later.

There are some issues all around. It's a little weird how the font size jumps around I general.

1.)

enter image description here

  1. I'm not a big fan of how the search font is different from anything else and how it's bold. Maybe it should use the same font as the body text elsewhere.
  2. Because the font is bold and relatively big in comparison to the headings, and because there is already the hamburger menu on that search bar, It looks a bit like it could even be a title for this view or something. It's not unheard of to have the search input materialize itself after a click, so who knows.
  3. There are no hard rules about these things in general, but sometimes it's good to follow the herd and use visuals that people, in general, are used to, in order to keep things user-friendly. I'm sure pretty much everyone has had someone, a relative or a friend complain how some website changed its layout and it's now worse because they don't know where everything is. Take freedom in designing things however you want, but be aware that you may be confusing people with visual language that fights with their brain. The point is that it's not super common for the placeholder text for the search to be bold or to be bigger than the body text.
  4. Maybe this is nothing, but I feel like I have to mention it. Why is the magnifying glass icon rendered so weird and aliased. I'm thinking it's just how the screenshot was saved or something because even the clock and the icons at the bottom are the same.

2.)

enter image description here

  1. This is not really an issue necessarily, but out of these two headings, the bottom one is slightly bigger. That fights a little against the hierarchy (maybe).
  2. They are separated into their own blocks with the background color and that sort of resets the hierarchy.
  3. If the bottom heading is where sort of the meat of the page starts, then I no qualms about that.
  4. The whitespace or padding around the headings is inconsistent... which is not necessarily wrong, but the way it is inconsistent is in my opinion.
  5. The top heading has top padding around 50px and the bottom heading has top padding of around 34px. I think they should both be around 50px or because the area with the white background is sort of like the content area, this heading could have like slightly bigger padding. But I'd say that depends a little on what the text in each of these halves says.
  6. Bottom padding is a bit off too. Top heading has about 21 and bottom heading has around 26.
  7. These differences are not that big of a deal, but sometimes our brains flash warnings even if we can't quite tell why. No reason not to fix these.
  8. You may want to rethink the colors too. It's a little weird how the body text on the white background has same color as the heading above it. The body text at the top is vastly different and I would also say the white text is perhaps a little too white. It jumps at you, where as the red text doesn't.
  9. Here again, I have to mention about the icon. The edges look terrible.

3.)

enter image description here

Now that we finally got to the form area (I guess..), this is where the trouble really starts. There's all kinds of whitespace here, that makes it difficult to decipher what is what. It takes a hot second to even realize what you're looking at. After analyzing that last night, I'm now convinced it is actually a form of some sort, but the first time I looked at it, I wasn't quite sure.

  1. I flooded all the whitespace with color to try and visually explain why it's a little inconsistent and weird. It's not totally fair as I was a bit fast and loose with it, but I think it gets the point across.
  2. I think in general this could benefit a lot from a more linear and vertical layout, which is to say: Every element should occupy their own row and cover the full width of the viewport, except the button at the bottom might not need to be full width. It's easier to just go top down rather than for your eyes to serpentine from left to right looking for where one element starts and where the next one begins.
    • I sometimes it makes sense to have columns, but on a mobile device and with the form as it is, I think one row per element would be better.
    • If this app can be used with a tablet, maybe this area could have a max width and be centered horizontally. That's just an idea.
  3. I think all of these form elements should be given like a border or a background color or something. These are not always necessary, but really effective in guiding ones eye from one element to the next. As it is it would definitely help, but if every element is given their own row, that alone could help a lot.
  4. Slightly more in-depth about each element:
    1. Dropdowns (+text) — The gap between the text and the arrow is inconsistent between the two dropdowns. It's not necessarily an issue given how they one spans the whole width of the viewport (+padding) and the other one doesn't, it's unavoidable, but I think that alone makes me think they should both span the full width of the viewport.
      • The second dropdown has that 100 there with a huge gap and I'm not sure if it's part of the dropdown or not. It's also a bit lighter. It's hard to say for sure without clicking the dropdown.
      • The text beside it can also hold a max of 3 decent size words per row, which is kinda pushing it. It's a bit too tight for comfort.
      • I'm sure the reason behind putting it there is that it relates to that dropdown somehow, but I don't think it makes it any worse to have it above or below it.
    2. Input — Because this area is kind of a mess, I had a brief moment where I wasn't sure if this was a sub heading or an input.
      • The font size that matches the dropdowns indicates it's probably not a heading, but on the other hand this is a very common style for a heading.
      • Perhaps the text could be gray to make it look more like a placeholder text.
      • or maybe if the line starts from the left side of the text, it would no longer look like a possible heading. On a mobile device it's not very feasible if the text is not like super short.
      • Background color or a border or inset shadow would probably help a lot.
    3. Range slider (+button) — I think that as it is, I would want it centered vertically with the button, but if every element is given their own row, then that would not be necessary.
      • One confusing thing here is that the button is on the right side of the range slider making it seem like the button relates directly to the range slider and has nothing to do with any other element.
      • The accent color that only these two elements in the form share further reinforces that idea.
      • Perhaps the range slider thumb should be gray instead.
      • Perhaps all elements could share this accent color somehow. I don't think there is a good way to do that though. One idea I had was to make the input text and the arrows in the dropdowns yellow too, but it's really the input text where I think that idea falls apart. It might look odd.
    4. button
      • The first thing that bothers me is how there's more padding at the top and bottom than on the sides. It just looks like it's crammed in there and the padding on the sides was reduced to make it fit. Yet you left the top and bottom padding intact because there's more space vertically.
      • I typically like to have more padding on the sides for buttons. It balances it out. Sometimes it makes sense to have equal padding on all sides.
      • The only reason why this even looks like a button is the placement and the fact that the text is so short. It could benefit from like a shadow, border or rounded corners.

I made a quick example where I implemented some of those changes I was talking about. By no means is this like a production ready layout. There's plenty of things I don't like about it. Some further improvements would require to know the context and the need, which I have no idea about. Like on thing is the rang slider. There's no clear indication of what it does.

At the very least this image should get the idea across that when everything is stacked in an orderly manner, you don't have to go crazy trying to figure out what is what.

enter image description here

I left out a lot of things from the first iteration of this answer. The original can be found from the edit link.

  • 1
    Thank you very much! This is a screenshot of the Android app. The lack of borders (and colors) is due to the default fields configuration of Android apps. They don't have any border, except for the bottom border of text fields. I didn't think to add them. In fact I didn't think to design my fields! Thanks again! I hope it will make this section less white. Perhaps I will add the gradient transparent image also. – JarsOfJam-Scheduler Sep 28 '18 at 6:24
  • 2
    @JarsOfJam-Scheduler, I edited the answer to be more human readable. – Joonas Sep 28 '18 at 8:59
2

As I see it, the main problem is the large serif font you have chosen. This of course is my own opinion, but I really don't like it, and I don't think it matches or compliments the other text or the rest of the design.

Here's a list of other problems I see.

  • There are too many confusing variations in font colour, size, and kerning
  • The logo is positioned awkwardly - it needs some space around it.
  • There are too many colours, and they are not complimentary
  • It's not clear what are drop down options, and what are entry fields, and what is information
  • The layout lacks balance, and blank space isn't being used effectively

My advice would be to simplify the design, to keep it clean, be aware of blank space and how to use it more effectively.

This is a rough sketch, but something like this should perhaps illustrate what I mean . . .

enter image description here

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.