What is good web design, anyway?



  • Looking at what passes for good websites among designers, I get a feeling that efficiency is very uncool these days. Some people seem too busy erecting ivory towers to ever think about users. We have seen this before, not least in the programming world. I used to be quite fond of writing RPN, especially in FORTH, but that was more out of need because of the weak hardware of the time. Others went much further, competing in writing the densest (and most obtuse) one liners possible. APL was an early favourite, but the habit was also widespread in TCL and Perl. It is all about showing off to your peers. The trends among "cool" web designers is worse, though. They manage to get the obtuseness and user-unfriendliness without the efficiency of the one-liners. I will list some of [i]my[/i] criteria for good websites, and those interested may add their own thoughts. This list is both about technical site design and visual page design, as they represent a whole for the user. I start with the simple fundamentals: [ul] [li]NO dynamic content when static will do[/li] [li]NO "invisible" (i.e. cleverly camouflaged) links[/li] [li]NO user registration or sign in on unencrypted connections[/li] [li]Actually NO non-trivial forms on unencrypted connections[/li] [/ul] [ul] [li]All major text blocks in legible font with good contrast to a light background[/li] [li]All pages must let the user use the [i]back/i button to get to the previously viewed page[/li] [li]If there is a site logo in the page header, clicking it should take you to the site homepage, not a subsection[/li] [/ul]



  • I especially i agree with you on the user registration or sign in thing. Putting it in an unincrypted connection will defeat the whole purpuse this.



  • @bv:

    [ul]

    • NO dynamic content when static will do
      [/ul]

    defintely!

    Additionally:
    [ul]

    • No absolute sizes for fonts and line-heights
    • No negative letterspacing. You want it narrow? Use a condensed font (but make sure that the generic fallback will fit into place too) but please, please do not letterspacing. The font designers put a lot of thought in the proportions and distances and it simply does not work if someone changes it.
    • No animations near important text.
    • Enough empty space around the content to give a clear hint where it is. Nothing is worse than having to search the main content between bits of this and that and advertisements.
    • No pagination if it is not absolutely necessary. While about 70% of the users follow the link to the second page, only 20% follow the link to the third, so i in 80% of the cases the third page is made for nothing. Furthermore having to click - wait for the page to load - click - wait for the page to load - click - wait for the page to load - click … is simply annoying.
      [/ul]


  • Not using position:fixed



  • [ul]

    • The page automatically must adapt to the screen width.
      [/ul]
      On smaller screens it is annoying when the page goes beyond the right margin and you have to either "fit to width" or navigate with cursor keys.


  • Now there is a bunch of answers, what good web design is not - but nothing of that answers the question:

    What is good web design? (without the "anyway")

    What - apart from content I want to read, listen to, watch, play with - makes a design good, or at least better than others?
    What - apart from avoiding the above mentioned problems - can visual designers do to create a great site or page?
    How can the page programmers, meaning the people who convert the visual design to the well known techniques like HTML, CSS, ECMAScript, etc. pp., make it happen without breaking the demands of the clients?
    Is design, choice of words, etc.pp. culture related or is there some kind of "universal" design?

    How to "sell" a good design (visual- and code-design) to the people who pay for it, aka. "The Management"?

    … and the most important question in the end:

    When to break the "rules"?



  • Good design to me means that it is easy to do what the typical target audience wants to do.

    This means that form follows function, not the other way around. Every interaction should be easy to perform even if you work without one of the usually assumed input methods. It should be usable with either keyboard, mouse, voice, or touchscreen.

    Defaults should be rational and flexible based on user needs and preferences rather than convenience. For instance, default language should be selected from the Accept-Language header rather than location (but user override should be remembered).

    Markup should be HTML5, using semantic tags to help both voice output and searching.

    Visually, the design must lead the eye towards the main content. Many sites fail in this because they want to get their ads clicked, but I think that is self-defeating in the long run. If the site is too annoying, people will find the same type of content another place.



  • @bv:

    This means that form follows function, not the other way around.

    I don't know who used that expression first and it is as right as it is wrong - sometimes the form creates the function.

    Yes, I had some hard discussions with some designers and I was a hardliner before, but they were right. Form is important and it should not be always the same form. Sometimes it is necessary to break out of the form to make the point. Sometimes even the pointless things are those that are important - because we are no robots. We as visitors of a web page usually do not care about the code, as long as it works and does not surprise us unpleasantly (unless we want to know how it works or why something does not work - but that is geeky)

    Sometimes a really baroque design is better than something following the Bauhaus style.

    Of course in the end the designer should still follow the concept of least surprise for all of the usual functions, but sometimes it is important to go nuts.

    Casa Milà has its place in the world too - and it is functional, at its time was way more functional than the normal houses, despite the not minimized form and despite allowing for stuff that is not functional at the first glance.

    @bv:

    Good design to me means that it is easy to do what the typical target audience wants to do.

    … and sometimes it creates a target audience and sometimes it creates the wishes of the audience. There is a multi billion company out there that earned its money exactly with that scheme.

    In the end I still read only tech stuff here. Coming from that side myself but being open minded (at least I hope so), it would be interesting to hear from the "other" side, i.e. what some of the more visual girls and guys have to say about it. It could be enlightening.

    PS: Some thoughts, not directly related, but showing the problems with the definitions of design 1 (the back end aka providing the data and preparation for 2 and 3), 2 (the front end aka how it works on the client side) and 3 (the visual stuff aka what we see - emotions?):
    http://lea.verou.me/2013/12/css-is-for-developers/



  • @QuHno:

    … it would be interesting to hear from the "other" side, i.e. what some of the more visual girls and guys have to say about it. It could be enlightening. ...

    I go to different websites for differing reasons, and what constitutes "good design" (to me as a mere non-site-coding mortal) depends largely on what I'm trying to do at the site, much as bv mentioned. In the case of sites where I must fill out a lot of form entries (government data submittals, etc), a 'good' site is one that allows me to enter data with no interference to my back-and-forth movements (within a page, or even from page-to-page of the same form). The site should also not force me to "tab key" between entry boxes, but rely on the "enter" key (the most natural way to tell a keyboard the user is done with a particular entry); it should also anticipate the use of numerical punctuation without having to perform special actions (eg: a user should be able to enter dollars-period-cents, rather than dollars-tabkey-cents to put that data into separate boxes). If 'good', such a site should also be uncluttered and use a clear, readable font with a minimum of interfering or distracting page colors, and decent "helps" instructions should be available in some simple, consistent way (eg: F1) for each data entry box. Finally, a full-proofing of the entire, completed form should be available for review and editing before a submittal is made "final". A surprising number of sites lack these elements, and the user pays for it in frustration and extra work.

    On the other hand, for sites used to display videos or lots of graphics, the page should not be over-crowded and busy, but instead perhaps have fairly small 'preview' image-links near the top that jump the user down to the page's location where that item is featured in full or with details; otherwise, the page should scroll smoothly down/up its full length without causing the browser a lot of grief (jumping, white-screening, etc). In all cases, if some functionality is needed to correctly view the page, its absence should be detected upon first visiting the page (if at all possible) and the user be prominantly informed at the top of the page as to what's missing; however, such absence should not be used to block the user's access to whatever remains on the page that he can use. There's perhaps nothing as frustrating as a page that is mostly blocked from viewing because the user has disabled JavaScript or Flash or whatever, but the warning message blocks him from even accessing some plain-text or image further down that happens to be all he needs to see.

    Perhaps this thread discussion is more intended toward the "prettiness" and "balance" and "artsy" aspects of page design. If so, I apologize for interjecting these more mundane user perspectives.



  • @QuHno:

    @bv:

    This means that form follows function, not the other way around.

    I don't know who used that expression first and it is as right as it is wrong - sometimes the form creates the function.

    I guess this boils down to how you define "follows". We have probably all seen sites where the visual design is made without any thought to the user or the possible use cases. The worst I have seen - on several sites, and even back when people were using slow dial-up lines - was a logo and a huge picture on a black background. If you did not guess that you should click on the picture (and the pointer did not change when you hovered over it), you would not get anywhere. The logo was not clickable.

    If the form creates functionality, it still means that the form serves the function. That is something very different from form hiding or hindering function.



  • I fully agree to that. Every design (3) has to be user centric or it will fail in the end.

    … and of course design (1) and (2) should not be too abstract - shoving layer of abstraction upon layer of abstraction leads to slow pages most of the time.
    Every designer (1) and (2) should ask (her|him)self what (s)he is doing wrong if (s)he uses more than 2 different frameworks at the same time ...

    (I am a fan of vanilla code, but I can understand that sometimes libraries, frameworks or pre-fabricated code snippets are used for a reason)



  • On the other hand, for sites used to display videos or lots of graphics, the page should not be over-crowded and busy, but instead perhaps have fairly small 'preview' image-links near the top that jump the user down to the page's location where that item is featured in full or with details; otherwise, the page should scroll smoothly down/up its full length without causing the browser a lot of grief (jumping, white-screening, etc).

    http://www.chudu24.com/


  • Vivaldi Translator

    The company I used to work for had 1 main rule for web design.
    The visitor must be where they need to be, within 3 clicks.
    It forces your designers to keep the navigation obvious and simple, without you having to tell them to.



  • do you have any info how to link music to my blog on Vivaldi. ? I am from Opera and it was easy to do it there . Is there a code ?



  • ***"densest (and most obtuse) one liners possible "

    I'm not so sure that design and creation of a website are synonymous. Good design might entail such factors as user friendliness and ease of navigation. Visual appeal? What is the website designed or programmed to do? If you were designing/creating a business or technical website, you would utilize different mechanisms then you might for an entertainment or sales of mass appeal consumer products.

    But as far as for programming languages. I'd say the most obvious, logical, mnemonically memorable one that could be created--which may or may not be currently in vogue.



  • @Dr.Flay How about a fuzzy logic site that doesn't bank so much on click-thrus? But I do see...most ppl are lazy and with short attention spans--so why not cater to the lowest common denominator? Profitability is the goal. Or is that the ENTIRE purpose of the web?



  • @QuHno said in What is good web design, anyway?:

    Casa Milà

    Researchers in psychometrics, as well as top advertising agencies, to a lesser extent have clear indications on what is visually and maybe aurally appealing through statistical analysis. A website is not quite a full immersion experience...so we are limited to the number of senses a designer can appeal to. Do you concur?



  • @Blackbird Not mundane. Relevant. The OP made what I assume are clear references to design and programming required. If the ppl who reply mostly concern themselves with visual appeal, functionality, or whatnot is an aside. Good web design may be as simple as predicting where the weight of the crowd is going and what they will eat up as a matter of preference.



  • @bv I see. Then you still must concern yourself with the limits of the operating system and web browser they are using...the users. That complicates the matter substantially, I'd say.



  • On the other hand, for sites used to display videos or lots of graphics, the page should not be over-crowded and busy, but instead perhaps have fairly small 'preview' image-links near the top that jump the user down to the page's location where that item is featured in full or with details; otherwise, the page should scroll smoothly down/up its full length without causing the browser a lot of grief (jumping, white-screening, etc).
    link text


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.