Grow your CSS skills. Land your dream job.

Is the UX acceptable? Any critique would help!

  • # August 8, 2014 at 6:22 am

    Hi all

    This is my first post on the forum! Here we go…

    Please take a look at http://beta.koopkarre.co.za and feel free to comment on any of the styling and user experiences. This site needs to work for a market of people that must be considered as technically inefficient :)

    Thank you in advance to anyone that is willing to take a look.

    Cherio

    # August 9, 2014 at 7:27 am

    I like the unpretentious look of the page, and as a Dutchman am also totally charmed by die vriendelike taal. The white text on darker backgound could be better though, and there is some faux bolding going on as well. With light text on dark background, more often than not, you want the letters to be a bit further apart (like so in CSS : p { letter-spacing: 1px ) because the light letters appear to be bigger for the eye, and the negative spaces in between the letters appear to be smaller. A bit of text-shadow can help as well to make it stand out a bit more. When I type in the search-box, there is nothing to be seen, because the text-color is white on white background. To fix the “faux bolding”, you will have to include also the bold weights in the link-stylesheet-definition in the header from google-webfonts. I parked a demo-page here with some changes, for comparison.
    Also the clickable area in the top menu is rather small, and there is no visual feedback on hover. When you would remove the padding on the list-items, and instead set padding on the nav-links, give it a hover-state with a brighter background-color, then this menu becomes user-friendlier as well

    # August 11, 2014 at 1:11 am

    Hi Atelierbram

    Thank you very much for your response. I am a complete rookie when it comes to design and the subtle changes you suggest really goes far. Is it possible for me to copy and paste what you did?

    Thanks again.

    # August 11, 2014 at 1:19 am

    Using letter-spacing and shadows on body text…what the?

    # August 11, 2014 at 2:00 am

    @afrikazaber Since this is the web you can view source and see my changes in the top of the CSS -file here And why not make friends with some local web-designer, ( give reduction on the next car in return :)

    @chrisburton I take it that you are a man of principles. Why not reading a bit closer and see this in context? The context of this question is about the user interface. I would never put a lot of text, say body text, in white on dark background anyway. But for ui-elements, sure. Since the kerning of most fonts is based on dark on white text, then why not use some letter-spacing on ui-elements, for reasons I explained? And yes text-shadow as well, and no, to be clear: I would not recommend large sections of body text set in white on dark background with letter-spacing and text-shadow.

    # August 11, 2014 at 2:27 am

    @Atelierbram I managed to get it pretty close to what you suggested. Thanks again for your effort. Can I reach you anywhere for freelance work?

    # August 11, 2014 at 2:31 am

    I take it that you are a man of principles

    It’s not about principles but simple logic (see below).

    Since the kerning of most fonts is based on dark on white text, then why not use some letter-spacing on ui-elements, for reasons I explained?

    You’re not talking about kerning but rather tracking on body text. Roboto itself is not a great UI typeface in general and using your methods (letter-spacing, word-spacing, shadow) proves that. It is essentially trying to cover up a problem rather than finding an adequate solution.

    Perhaps the solution would be to find a more suitable typeface.

    # August 11, 2014 at 2:47 am

    @chrisburton Which typeface would you suggest?

    # August 11, 2014 at 3:03 am

    Source Sans, Open Sans, Benton Sans or practically anything from the Webtype RE series.

    # August 11, 2014 at 3:09 am

    You’re not talking about kerning but rather tracking on body text.

    @chrisburton this is a more constructive contribution, but see, I didn’t write about body text, don’t you see? And if tracking is the correct term for what I mean, then: the tracking of most fonts is based on dark on white text: still the same point.

    Roboto was this four headed frankenstein font and although it is getting better, I am not going to defend it, … it has to do with the need of Google to have there own ui-font (for Android no?). . In my example I used the condensed version for headings which is already a bit better.

    Roboto itself is not a great UI typeface in general and using your methods (letter-spacing, word-spacing, shadow) proves that.

    The only thing it proves in my test-page is that it does look better there, like with this font and, please try it out, most of the other free fonts out there.

    # August 11, 2014 at 3:25 am

    the tracking of most fonts is based on dark on white text

    Please elaborate.

    There’s no debate in which Roboto has improved but that does not mean it doesn’t have the same problem.

    # August 11, 2014 at 3:50 am

    @chrisburton Now you want me to elaborate …, well it has to do with backlighting, (like in a computer-screen, reason why your eyes get tired after a day behind the screen). But don’t take my word for it, FF-Info(-Display) for example was designed to tackle this issue.

    Signs are usually read in motion, and often from strange angles. Under such circumstances, letter forms can become blurred and indistinct. Back-lighting signs has the effect of rounding otherwise sharp corners, further complicating the process of recognizing individual letters. FF Info Display was designed with such circumstances in mind: the rounded ends of the letters are less prone to distortion and the letters remain true to form. White type on a dark background appears heavier than dark type on a light background. This effect is exaggerated if the light type is back-lit. In FF Info Display, the difference between the various weights has been designed to compensate for this effect.

    # August 11, 2014 at 2:13 pm

    Think about what you’re reading and then applying to text type on the web. I think we’ll have to agree to disagree on your ‘improvements’. It was nice chatting with you regardless.

    # August 11, 2014 at 3:10 pm

    Now when you read back what you just wrote, can you find any arguments in there? Any reason why you should never use letter-spacing to try to improve readability of type ( text in ui-elements or headers like light text on dark background ) on the web? Don’t know if you are insincere or being sarcastic, or what, but for me to enjoy a conversation like this, I would like to hear arguments. You come in with an attitude by giving this sloppy and snarky remark, and go out with an attitude by being, in my mind, quite arrogant, and I can’t say I enjoyed it.

    # August 11, 2014 at 3:31 pm

    Any reason why you should never use letter-spacing to try to improve readability of type

    No. But you’re trying to back up what you consider improvements and or a solution with how FF Info (Display) was designed for signs. Display and text type are completely different (especially on the web). My point in my last comment was based on this.

    You come in with an attitude by giving this sloppy and snarky remark, and go out with an attitude by being, in my mind, quite arrogant, and I can’t say I enjoyed it.

    Quite the opposite. I think I was a bit shocked as to your recommendation to the OP regarding methods to try to improve the readability of text type with an already poor UI typeface. Trying to cover up the issue is not an adequate solution, in my opinion. That is all. Now, if you applied this to a display face or headline, I think we could agree with each other. It’s easy to misinterpret a mood or feeling when you can’t hear the person.

Viewing 15 posts - 1 through 15 (of 19 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".