After a bit of a break I'm working on a new side project. It is in a very competitive space and I have decided that the user experience needs to be the core USP, for it to attract the kind of crowd - and content - required to establish a presence in the market.
This has made me think once again about what makes for a good user experience. Broadly speaking, it is pretty much all about reducing friction, to help people get from A to B in the most straightforward way possible.
But is 'good' what we should all be aiming for? Why not aim a bit higher?
So what makes a great user experience? I'd say it was all of the above - a friction-free journey - as well as a smattering of pleasant surprises along the way; surprises that delight the user. They say good design is invisible, but I think that great design can leave quite an impression on people.
I'm constantly amazed by my own reaction to the little details in life. The smallest of things can have a disproportionate influence on how I perceive things, both positively and negatively. I'm a stickler for detail, and have been looking for examples of micro design, as a source of inspiration for my own project.
To this end, two sites in particular have been particularly useful: Codepen, and CSSDeck. Many of these 17 examples can be found over there, and some are very lean indeed, using just CSS to achieve the desired effects.
Ok, let's check them out...
Motion blur text scrolling
Play with the controls on the right to adjust the text and effects. Then scroll down the page...
Transform a thumbnail into a lightbox
Click on the thumbnail to make it bigger.
Direction-aware hover effect
Uses JS to identify which direction the cursor is coming from, and then CSS for the animations.
Various other hover effects
Choose from seven different animated hover states.
Sliding boxes - flat design
Thumbnail product details
Hover to reveal more details and expand options. Nicely done.
A simple vertical menu
Uses CSS3 and Jquery.
A simple slide-out menu
Uses CSS only.
A bunch of lovely checkboxes
Look at them, they're delightful. And they're made purely in CSS3.
Animated check inputs
From a cross to a tick…
Lock switches
Flat design social panel
With a bit of tweaking (a better call to action) this could be good for social sharing / follower growth.
Loading animation
Everybody hates waiting, but loading animations are tolerated in small doses...
Percentage bars
These could be used to in the style of LinkedIn to show how complete a profile is.
Flat UI log in
A rather pretty form for signing in, registration and password resetting.
Flat design - sliders
Drag them left, drag them right...
A countdown timer
This is done on jQuery canvas. When is your next sale going to kick in?
If you like this compliation then you might want to check out my other posts on microscopic attention to detail in UX design, and the A-Z of design principles from the experts.
What other examples have you seen? Do let me know in the comments area below...
No hay comentarios:
Publicar un comentario