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]
- NO dynamic content when static will do
-
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.
- The page automatically must adapt to the screen width.
-
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/ -
… 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.
-
@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).
-
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 ?
-
In the past weeks i've ran across so many poorly designed websites, it's unreal.
So, my personal wishlist:- There is NO reason not to use SSL. Encrypt your site. No excuses. For no Traffic. Ever.
- No fixed values for UI elements. We do use Smartphones more and more. No need for a full mobile site, but at least make it, so your fonts and UI elements scale and don't overlap.
- Clearly seperate Adds and Content
- Every site "should" have a light and dark mode. Some of us work on a PC all day. Looking at white backgrounds all the time is really annoying and it takes me hundreds of lines of css injection to fix this
- Standard Fonts only. Nothing worse than a wesite using a font you don't have and rendering complete trash.
- Widen the content to the space you've got. We've mostly switched to 16:10 and wider displays years ago. Having a website in Fullscreen use 30% in the middle is dumb. We all got big displays, make use of them.
Apart from that, i agree with most things already said.
-
All major text blocks in legible font with good contrast to a light background
The number of times I've come across sites and apps that insist on putting grey text on a white background (or worse, on a dark grey background and passing that off as a "night mode") is very disheartening.
-
This post is deleted! -
My personal ideal for good web design is to have nice evenly-spaced circumferential strands, with equally-spaced radial arms, such that the resultant interstitials are 50% of my smallest target meal diameter. Most important is the need for an even tension in all the arms; i mean, duh.
-
@guigirl You forgot: Purple everywhere.
-
This post is deleted! -
Ppafflick moved this topic from Design on -
Ppafflick moved this topic from Customizations & Extensions on
