“A site designed for flow must appeal to new users and power users alike. It must stretch both sets of users in a way they find enjoyable rather than daunting.”
This is the key point in turning first time visitors into power users no matter if the site is designed for flow or not.
It’s interesting to think about how flow differs from user to user, in terms of internet connection, processor speed, mouse/keyboard preference, etc. The hard/fun part is optimizing this for all users.
To borrow a line from Jared Spool, “Good content must suck” a user toward their goal. The user must feel like they are “on the scent” always getting closer to what they want.
The key, I think, to good flow is usability and accessibility. If for instance you ever tried to read Gmail with Lynx, or use a screen reader on a lot of the flash sites out there you’ll find that at some point even the coolest interface has a limit.
I see the true test of “flow” is if the important parts are accessible, clear and intuitive even to the simplest of HTML agents and offer something special and visually pleasing to the most advanced clients.
Flow in a site that is mostly content means clear, easy to follow and catchy copy. Flow for a web application or tool means that your lead from start to finish without getting stuck because of either long page loads or user confusion from bad design choices.
I’m not sure that I agree that accessibility is a key to flow. I think you can create a flow experience that incorporates good accessibility practices, but I also think that you can create a site that promotes flow without once considering accessibility. Obviously that site will end up excluding lots of people, but it doesn’t mean it won’t inspire flow in some.
Don’t get me wrong, I’m a believer in web standards and accessibility, I just don’t think that accessibility and flow are necessarily related.
Flow is very important indeed but many sites aren’t designed to show users steps to achieve. Sometimes also very important is to create desire of achieving goals by users and then the next step is showing users those goals.
Tom Wujec blogged a TED presentation about Flow which might add to conversation at http://www.tomwujec.com/ and click on Mihaly Csiksentmihalyi name on left… I find the first sketch thought-provoking!
Thanks for very interesting article. btw. I really enjoyed reading all of your articles. It’s interesting to read ideas, and observations from someone else’s point of view”¦ makes you think more. Keep up the good work. Greetings
Relating a user’s experience on your website to flow seems like a pretty far stretch to me. The main idea behind flow is total immersion in an experience to the point that you lose track of other stimuli like time or hunger. It’s a matter of being absorbed in an activity, in your work, in a game, in the creative process.
Obviously there are exceptions… I could easily be immersed in reading articles on wikipedia or browsing pictures on flickr. But buy.com or your gadget’s marketing website? Usability is important, but I just don’t see flow as being applicable.
I think, that flow is not just part of usability, but goes beyond it. As part of usability, users will be able to achieve a task within their level of ability and challenge. This will be “intrinsically rewarding” and may induce the user to concentrate and focus on that same site.
Thanks for this clear, succinct piece. I think the first point is the most important—you have to know what you want from your readers before you can lead them there.
Copy & paste the code below to embed this comment.
a girl
this is an okay article. i feel as though this is not the best interpretation of the basic general ui design principles (http://www.useit.com/papers/heuristic/heuristic_list.html). no, i do not have any of my own interpretations, but i feel that there is a better interpretation out there, that would better convey the principles as a whole. flow doesn’t cut it too well. good attempt though…
This idea of designing for flow is indeed an interesting concept. Web designers probably sense the need to design for flow implicitly, but maybe it is much better to have this idea in front of your eyes when deciding on your future projects.
Good article, most designers even in the early days of learning design skills, try to achieve some kind of flow, i think it is generally the subtle approach that yet again proves to be most appealing to users.
@Jim Ramsey: you are correct in stating that a site can have great flow without accessibility, if it couldn’t we wouldn’t have had a decent site prior to XHTML and IE 6 hitting the mainstream.
It would though be nice if everyone worked towards accessible sites; but then again it would also be nice if trees were made of chocolate.
Thanks for the great article. I especially liked the part about discovery. Sometimes designers or developers will want to highlight a new feature real big on the home page, when that feature isn’t the focus of their site. I agree with helping the user continue to discover additional features on the site. The familiar user will notice the small changes and the new user will see that the features are in the right category instead of an out of place focus.
Copy & paste the code below to embed this comment.
Martin Bulmer
Perhaps for the only time in my life I can say I was there first – almost. I wrote a dissertation for my Masters Degree on ‘The Application of the Psychological Theory of Flow to User Interface Design’ in June 1995. The dissertation talks about Talligent, Creative Writer, and other applications and companies long gone. The key findings are below. I’ve reflected them against today’s web:
1). Congruent goals (good user needs assessment balanced with site goals – user experience design)
2). Timely, relevant feedback (Ajax ahoy!)
3). Enjoyment (making the task fun, not just the goal achievable
4). Personalisation (Social networking anyone?)
5). Modularity (have websites ‘with training wheels’ that can get the user ‘started’ but which can then evolve into more complex, richer beasts. Facebook for example )
Anyone who’s bothered can badger me for a copy (yeah, don’t all rush a tone)
With my background in Graphic Design and Advertisement, the push has always been to guide the reader/viewer to the place you wanted them to land. Even so this holds true in Web Design, the possibilities for discovery has been introduced in a way that was not possible before and makes the game so much bigger… and more fun.
After years of doing the same old thing that the others in my field, (Wedding Photography), are doing with flash, I’ve finally gotten to what I think is the sweet spot with my own site “www.williambayphotography.com”:url for flow.
Using a full flash site is clunky for myself and my viewers.
Now allowing the page to span downwards, rather than sitting square in the middle as if a portfolio on an island, I can now add more content. I can have additional features.
Letting the whole experience flow.
If any drawbacks, it has forced me to come up with more content. But that of course will be a win-win down the line.
A lot of web sites are focued on the call-to-action for conversion. We think the momenumt type calls-to-action help encourage “flow.” Keeping the user smoothly moving through the web site by combining content / design / momentum calls-to-action (not conversion calls-to-action) is the key to the ulimate goal…well, usually in our clients’ case, conversion.
I partly decided to come to alistapart.com today to see what colors you use in your design. Have they jumped on the unexplainable so-light-it’s-unreadable text bandwagon? (light grey, blue and orange being the culprits)
Thank God no!
And by the way as someone who lives to feel flow, I was glad to find your great article.
These days there are sites I completely avoid because they cause dissonance for me, they’re so hard to read ( http://www.blackberry.com for one) They cause dissonance and discomfort, not flow.
I refrained from telling my parents to use Hulu since I didn’t want them complaining they couldn’t see the left nav.
http://www.hulu.com/recent/videos
I haven’t seen a lot of discussion on this design trend but hope the Internet’s design leaders can influence a return to beautiful but usable design much like your site, wordpress.com, and others that “get” usability over “lightness” or “elegance” or whatever the perceived design goals are for invisible text.
Thanks for this article. I am new to the design side of things but have been doing SEO for about 6 years and this article was very helpful in learning about design flow. Will be back.
Copy & paste the code below to embed this comment.
Stephen Slator
Thank you for your interesting article, Jim.
I found plenty of useful stuff.
But I’s like to admit that when I tried different formbuilders, it seemed to me that the most easy to use is a program created by PHP Forms developers. Well it is a metter of everyone to chose.
37 Reader Comments
Back to the ArticleLasse Larvanko
“A site designed for flow must appeal to new users and power users alike. It must stretch both sets of users in a way they find enjoyable rather than daunting.”
This is the key point in turning first time visitors into power users no matter if the site is designed for flow or not.
Great article.
Paul Bruns
Great article, as usual.
It’s interesting to think about how flow differs from user to user, in terms of internet connection, processor speed, mouse/keyboard preference, etc. The hard/fun part is optimizing this for all users.
John Lascurettes
To borrow a line from Jared Spool, “Good content must suck” a user toward their goal. The user must feel like they are “on the scent” always getting closer to what they want.
Same goes for flow.
Jeremy Streich
The key, I think, to good flow is usability and accessibility. If for instance you ever tried to read Gmail with Lynx, or use a screen reader on a lot of the flash sites out there you’ll find that at some point even the coolest interface has a limit.
I see the true test of “flow” is if the important parts are accessible, clear and intuitive even to the simplest of HTML agents and offer something special and visually pleasing to the most advanced clients.
Flow in a site that is mostly content means clear, easy to follow and catchy copy. Flow for a web application or tool means that your lead from start to finish without getting stuck because of either long page loads or user confusion from bad design choices.
Jim Ramsey
I’m not sure that I agree that accessibility is a key to flow. I think you can create a flow experience that incorporates good accessibility practices, but I also think that you can create a site that promotes flow without once considering accessibility. Obviously that site will end up excluding lots of people, but it doesn’t mean it won’t inspire flow in some.
Don’t get me wrong, I’m a believer in web standards and accessibility, I just don’t think that accessibility and flow are necessarily related.
Jamison Wieser
Great article Jim, thank you.
Aaron Burrows
I think that sentence provides the best summary of your article. Excellent!
Joshua Fruhlinger
I love articles about flow. I did a very similar one a few years ago: http://tc.eserver.org/15162.html
Nice work. I’m glad someone’s keeping the concept alive. Users should be challenged!
Nikolay Spassov
Interesting article. Love the artwork!
Beau Smith
It’s odd that when a tool has good flow you barely notice how easy accomplishing a task is.
Looking forward to more flow =)
Marcin Nabiałek
Flow is very important indeed but many sites aren’t designed to show users steps to achieve. Sometimes also very important is to create desire of achieving goals by users and then the next step is showing users those goals.
Jim Rait
Tom Wujec blogged a TED presentation about Flow which might add to conversation at http://www.tomwujec.com/ and click on Mihaly Csiksentmihalyi name on left… I find the first sketch thought-provoking!
Mazury Kajaki
Thanks for very interesting article. btw. I really enjoyed reading all of your articles. It’s interesting to read ideas, and observations from someone else’s point of view”¦ makes you think more. Keep up the good work. Greetings
jason van pelt
Relating a user’s experience on your website to flow seems like a pretty far stretch to me. The main idea behind flow is total immersion in an experience to the point that you lose track of other stimuli like time or hunger. It’s a matter of being absorbed in an activity, in your work, in a game, in the creative process.
Obviously there are exceptions… I could easily be immersed in reading articles on wikipedia or browsing pictures on flickr. But buy.com or your gadget’s marketing website? Usability is important, but I just don’t see flow as being applicable.
Richard Papp
I think, that flow is not just part of usability, but goes beyond it. As part of usability, users will be able to achieve a task within their level of ability and challenge. This will be “intrinsically rewarding” and may induce the user to concentrate and focus on that same site.
Jeffrey Benabio
Thanks for this clear, succinct piece. I think the first point is the most important—you have to know what you want from your readers before you can lead them there.
a girl
this is an okay article. i feel as though this is not the best interpretation of the basic general ui design principles (http://www.useit.com/papers/heuristic/heuristic_list.html). no, i do not have any of my own interpretations, but i feel that there is a better interpretation out there, that would better convey the principles as a whole. flow doesn’t cut it too well. good attempt though…
Olga Rezo
This idea of designing for flow is indeed an interesting concept. Web designers probably sense the need to design for flow implicitly, but maybe it is much better to have this idea in front of your eyes when deciding on your future projects.
Anthony Munns
Good article, most designers even in the early days of learning design skills, try to achieve some kind of flow, i think it is generally the subtle approach that yet again proves to be most appealing to users.
Chris McKee
@Jim Ramsey: you are correct in stating that a site can have great flow without accessibility, if it couldn’t we wouldn’t have had a decent site prior to XHTML and IE 6 hitting the mainstream.
It would though be nice if everyone worked towards accessible sites; but then again it would also be nice if trees were made of chocolate.
Purchase Dreamweaver
This is a great informative article, thank you.
Seth Taylor
Thanks for the great article. I especially liked the part about discovery. Sometimes designers or developers will want to highlight a new feature real big on the home page, when that feature isn’t the focus of their site. I agree with helping the user continue to discover additional features on the site. The familiar user will notice the small changes and the new user will see that the features are in the right category instead of an out of place focus.
Richard Davey
I found this article to be very informative and should help many webmasters in their future design work
Martin Bulmer
Perhaps for the only time in my life I can say I was there first – almost. I wrote a dissertation for my Masters Degree on ‘The Application of the Psychological Theory of Flow to User Interface Design’ in June 1995. The dissertation talks about Talligent, Creative Writer, and other applications and companies long gone. The key findings are below. I’ve reflected them against today’s web:
1). Congruent goals (good user needs assessment balanced with site goals – user experience design)
2). Timely, relevant feedback (Ajax ahoy!)
3). Enjoyment (making the task fun, not just the goal achievable
4). Personalisation (Social networking anyone?)
5). Modularity (have websites ‘with training wheels’ that can get the user ‘started’ but which can then evolve into more complex, richer beasts. Facebook for example )
Anyone who’s bothered can badger me for a copy (yeah, don’t all rush a tone)
Scott Walldren
Thanks for the insights, Jim. You’ve managed to encapsulate the essentials in a succinct article. Good to keep in mind for all future projects. :)
Greg Frey
Great Article, thanks.
Marlyse Comte
With my background in Graphic Design and Advertisement, the push has always been to guide the reader/viewer to the place you wanted them to land. Even so this holds true in Web Design, the possibilities for discovery has been introduced in a way that was not possible before and makes the game so much bigger… and more fun.
Thanks for this great article.
William Bay
After years of doing the same old thing that the others in my field, (Wedding Photography), are doing with flash, I’ve finally gotten to what I think is the sweet spot with my own site “www.williambayphotography.com”:url for flow.
Using a full flash site is clunky for myself and my viewers.
Now allowing the page to span downwards, rather than sitting square in the middle as if a portfolio on an island, I can now add more content. I can have additional features.
Letting the whole experience flow.
If any drawbacks, it has forced me to come up with more content. But that of course will be a win-win down the line.
Adam Landrum
A lot of web sites are focued on the call-to-action for conversion. We think the momenumt type calls-to-action help encourage “flow.” Keeping the user smoothly moving through the web site by combining content / design / momentum calls-to-action (not conversion calls-to-action) is the key to the ulimate goal…well, usually in our clients’ case, conversion.
Michael Ayed
Very interesting article. Thanks for learning again ;)
Michael Ayed
Very interesting article. Thanks for learning again ;)
Susie Wyshak
I partly decided to come to alistapart.com today to see what colors you use in your design. Have they jumped on the unexplainable so-light-it’s-unreadable text bandwagon? (light grey, blue and orange being the culprits)
Thank God no!
And by the way as someone who lives to feel flow, I was glad to find your great article.
These days there are sites I completely avoid because they cause dissonance for me, they’re so hard to read ( http://www.blackberry.com for one) They cause dissonance and discomfort, not flow.
I refrained from telling my parents to use Hulu since I didn’t want them complaining they couldn’t see the left nav.
http://www.hulu.com/recent/videos
I haven’t seen a lot of discussion on this design trend but hope the Internet’s design leaders can influence a return to beautiful but usable design much like your site, wordpress.com, and others that “get” usability over “lightness” or “elegance” or whatever the perceived design goals are for invisible text.
Bill Ross
Thanks for this article. I am new to the design side of things but have been doing SEO for about 6 years and this article was very helpful in learning about design flow. Will be back.
Stu Collett
I love this article!
Thanks Jim.
James Mason
Interesting article, there should be more articles to help designers design for flow…
harali321
Thank you for the helpful article. I found a site that takes the the work out of creating online forms:
http://www.elbowspace.com
Stephen Slator
Thank you for your interesting article, Jim.
I found plenty of useful stuff.
But I’s like to admit that when I tried different formbuilders, it seemed to me that the most easy to use is a program created by PHP Forms developers. Well it is a metter of everyone to chose.