Blue Mouse Monkey is thrilled to announce the launch of the new YourEconomy.org website. Your Economy, a project of the Edward Lowe Foundation, is an interactive resource center designed for users to explore and analyze economic activity in their own regions and nationwide. YE houses more economic data than the U.S. census bureau, and it can depict the dynamic journey of business communities evolving through time. However, the existing website was so complex and confusing that the YE founders had to train users in how the system worked, and they were compelled to manage a continuous flow of queries about usability.
Blue Mouse Monkey rose to the challenge to make the YE website user-friendly to a wide range of audiences, including the White House, state governors, economists, industry analysts, economic development experts, and the media. An intensive audit of processes, and analysis of user-experience requirements led to a complete redesign of the information architecture, user experience, look-and-feel, and written content. And the bright orange and yellow color scheme is a conscious departure from the stereotypical “blue for business” palette.
I was one of the first visual artists I know to get an art portfolio website. A student at PNCA did it for me as a project back in 1998. And he did a nice job, for what was available in web technologies in 1998. Then I learned how to make websites myself, and took charge of remaking my portfolio site. The second iteration used Frames (!) and what I thought at the time was an innovative horizontal scrolling navigation. Silly me. (This was before jQuery and all that good stuff, of course.) Then I did iteration #3 in Flash. Which was nice for a few years, but I won’t waste space on why Flash is no longer a good choice for making websites. Besides, the background was black (remember when that was sorta cool on a website?) and the images were small (remember when you had to take dialup users into account?). After a while I stopped mentioning my art portfolio site because it was getting a little embarrassing.
But this winter has seen the great makeover, and now I’m proud to announce the launch of iteration #4 of my art portfolio website, built in HTML5, and all clean and nice looking.
“…the emotional pain (schmerz comes from a German word meaning “pain”) caused by difficult interactions with electronic gadgets or unhelpful websites. If you’ve ever felt your cellphone was out to get you, you’ve suffered from technoschmerz.”
This word is long overdue. (Thank you, Kate Greene, for the coinage.) I expect to use it often. If I take my personal experiences with digital technologies (and in running a web design company, I have plenty) and multiply these by the number of people in the world with dependent connections to contemporary digital gadgets, I can only imagine the amount of confusion, delay, errors, and the resulting stress from wrestling with technologies that keep changing, or don’t work intuitively or correctly must be global and massive. Has anyone analyzed the overall cost of this? I wonder what it would amount to when weighed against the overall benefits…
Bruce Sterling's chart of technological adaptation
Bruce Sterling In his book Shaping Things (one of my all-time favorite books, btw) examines the evolving interplay between objects and people. He divides the technosocial realm into several epochs, beginning with ARTIFACTS, which are hand-made, muscle-powered objects, such as spears. Then moving to MACHINES, which are artifacts with moving parts that rely on a non-human, non-animal power source, and require an infrastructure of engineering, distribution, and finance. Think steam engines. Next up is PRODUCTS, and they are mass-produced, non-artisinal, widely distributed, and operate over continental economies of scale. Think blenders. Since 1989 we have been in the age of GIZMOS, according to Sterling. Gizmos are
“…highly unstable, user-alterable multi-featured objects, commonly programmable, with a brief lifespan. Gizmos offer functionality so plentiful that it is cheaper to import features into the object than it is to simplify it. Gizmos are commonly linked to network service providers; they are not stand-alone objects but interfaces.
Unlike artifacts, machines and products, gizmos have enough functionally to actively nag people. Their deployment demands extensive, sustained, interaction, upgrades, grooming, plug-ins, plug-outs, unsought messages, security threats,…
Sterling goes on to argue that we are moving into the epoch of SPIMES, which are already among us in primitive forms such as the RFID tag. But that’s a topic for another post. For now, GIZMOS are enough to deal with. And according to Sterling, we have long passed the Line of No Return on them. This is the moment when a revolutionary technology becomes the status quo, and a culture has become so reliant that it cannot voluntarily return to the previous technosocial condition, at least not without social collapse.
And dependent we are. Not just on the objects, but the networks that connect them. IMAP email that shows up at home, work, on my iPad, on my iPhone. Dropbox files that do the same. Writeroom for synched notes, BaseCamp for synched project management, FreshBooks for synched book-keeping. Compared with how I managed files and communications a mere two or three years ago, a revolution has taken place in my personal life, and I know it’s been mirrored in the lives of many.
Infographic by Randy Krum, coolinfographics.com
We are firmly in the age of the GIZMO. Thus I pledge allegiance to the new overlords, and I interact, upgrade, groom, and protect them from security threats whenever they demand it. Because if I fail to nurture these overlords, I become invisible and mute to anyone not standing directly in front of me!
Detail from The Garden of Earthly Delights, by Hieronymus Bosch
Suzy Vitello and I are distantly “related” in the literary world by virtue of our involvement in separate writing groups that sprang from the ur-group, Tom Spanbauer’s Dangerous Writing. While we’ve never sat at the same writing table, we’ve chatted at parties now and again, and we’ve worked together in our other lives — in the world of communications, branding, and websites. Suzy is an editor and copywriter, and I’m a web designer, and we have delightfully collaborated on many projects together over the years.
And she interviewed me on her blog! Check out Writers and branding: an interview with Julia Stoops for our discussion on the importance of author websites, the effect of DIY technologies, and the impact of art, teaching, and creative writing on my branding and web design practice.
Data-visualization virtuosos Fernanda Viegas and Martin Wattenberg create a hybrid “artform” (for lack of a more inclusive term) out of data sets. Straddling the realms of science, design, art, and exploration, these graphics reveal interesting patterns in data.
“Data visualization has historically been accessible only to the elite in academia, business, and government. But in recent years web-based visualizations–ranging from political art projects to news stories–have reached audiences of millions. Unfortunately, while lay users can view many sophisticated visualizations, they have few ways to create them.
To “democratize” visualization, and experiment with new collaborative techniques, we built Many Eyes, a web site where people may upload their own data, create interactive visualizations, and carry on conversations. The goal is to foster a social style of data analysis in which visualizations serve not only as a discovery tool for individuals but also as a means to spur discussion and collaboration.”
Carbon footprint of a Big Mac, by Tim Fiddaman
Visualizing data that isn’t normally visualized, or is presented in a new way, tells us different stories about the world. From a kid counting all the socks in his household, to trends in editing wikipedia, to a “social network” of the characters in the bible, Many Eyes shows us new patterns that hadn’t been noticed before.
Wattenberg and Viegas now work with Google on a project called the Big Picture Visualization Group in Cambridge, MA, with the goal of making visualizations available to regular people via Google.
It’s up and walking around: the new Blue Mouse Monkey website. All done up extra-nice in HTML5 and all that good stuff. It’s a bit dodgy on IE 6 and other hold-outs, but really, I cannot keep caring about obsolete browsers.
Bye-bye to the old Flash site, which was beautiful, but invisible to iPods and iPads, difficult for search engines, and a total pain to keep updated. However, it’s too lovely to banish completely, and can still be accessed via a link at the bottom of the new home page.
I was able to tweak and re-use a couple of the animations from the old site, on the contact page and the ‘404 page not found‘ page. I do love Flash. It was fun to use, great to make entire sites from if you were aiming for something artistic and didn’t care about SEO. I hate to see it get downgraded like it has been, but one must move with the times. And move we have. Thanks to Jimmy Thomas for doing the fabulous CSS build.
OTREC had outgrown its old website, and Blue Mouse Monkey was challenged with a complete reorganization of current content, addition of new content, a new look and feel, and a new content management system. What’s exceptional about this website is the degree to which content is cross-referenced. Because OTREC’s database of research projects is always growing, along with the participating faculty, news stories, and other cumulative content, it was important to create a site that made it easy for users to not only find specific information, but make connections between information. OTREC staff are also avid users of social media, and social media strategy and and integration was an important component of this project.
Audiences include transportation researchers and planners, transportation and planning students, transportation agencies and industries, the media, and RITA, the U.S. Department of Transportation’s research administration.
All websites require planning—that’s so true it’s almost a tautology. But some websites require more planning than others. Blue Mouse Monkey is enjoying an influx of opportunities to overhaul large complex websites, and I’ve been in super-planning mode the last couple of weeks.
As Steve Jobs says, design is often mistakenly ascribed to how something looks, but it’s really about how it works. It’s my job as a web designer to integrate the “how it looks” and the “how it works” according to many factors. There are several useful terms to describe this type of thinking, such as information architecture, interaction design, user experience design, and website architecture.
Historically the term “information architect” is attributed to Richard Saul Wurman, who saw it as the “creating of systemic, structural, and orderly principles to make something work”.
INFORMATION ARCHITECTURE is the categorization of information into a coherent structure, preferably one that the most people can understand quickly, if not inherently.
Understanding how a typical user will experience a decision a website asks them to make (e.g. click on link ‘X’ to access information ‘Y’) takes empathy. It’s the ability to put oneself in the user’s shoes — the user being someone who isn’t nearly as familiar with the website’s content or purpose as my client or I are.
INTERACTION DESIGN attempts to improve the usability and experience of the product, by first researching and understanding certain users’ needs and then designing to meet and exceed them.
The first conversation I have with clients is always begins with, “Who are your audiences, and what do you ideally want them to do on your site?”
USER EXPERIENCE DESIGN most frequently defines a sequence of interactions between a user (individual person) and a system, virtual or physical, designed to meet or support user needs and goals, primarily, while also satisfying systems requirements and organizational objectives.
Typical outputs include:
Site Audit (usability study of existing assets)
Flows and Navigation Maps
User stories or Scenarios
Persona (Fictitious users to act out the scenarios)
Site Maps and Content Inventory
Wireframes (screen blueprints or storyboards)
Prototypes (For interactive or in-the-mind simulation)
Written specifications (describing the behavior or design)
Graphic mockups (Precise visual of the expected end result)
When I plan a website I do all these things, except the Persona one, because that’s more applicable to game design. However, we bring in a focus group to give feedback on nearly-completed websites, so in a sense we have real users acting out the experience of the site.
WEBSITE ARCHITECTURE is an approach to the design and planning of websites which, like architecture itself, involves technical, aesthetic and functional criteria. As in traditional architecture, the focus is properly on the user and on user requirements. This requires particular attention to web content, a business plan, usability, interaction design, information architecture and web design. For effective search engine optimization it is necessary to have an appreciation of how a single website relates to the World Wide Web.
Since web content planning, design and management come within the scope of design methods, the traditional vitruvian aims of commodity, firmness and delight can guide the architecture of websites, as they do physical architecture and other design disciplines. Website architecture is coming within the scope of aesthetics and critical theory and this trend may accelerate with the advent of the semantic web and web 2.0. Both ideas emphasise the structural aspects of information. Structuralism is an approach to knowledge which has influenced a number of academic disciplines including aesthetics, critical theory and postmodernism. Web 2.0, because it involves user-generated content, directs the website architect’s attention to the structural aspects of information.
Then there’s the issue of users with different levels of familiarity with the Web. Unlike printed forms of communication such as books, newspapers, magazines and brochures, the Web is not something the majority of the population grew up with. Kids today are “digital natives“, but there are plenty of us still around who are “digital immigrants”.
An analogy is our knowledge of The Book. We all know how to read a book, so much so we barely register it as a type of knowledge. We understand the heirarchy of cover, title, table of contents, parts, chapters, appendices, index. We don’t have to consciously remember where to begin, or in what order to experience the content, because we learned that stuff on our mother’s knee. Well, maybe not appendices and indices, but by the time we’re reading those kinds of books, we have a solid framework to slot those categories into. But the Web? We’ve had to learn that as adults. And it’s so new it’s barely been standardized. No wonder many people find websites (and computers in general) frustrating. Humankind has been tossed into a new way of organizing and accessing information, and our brains, accustomed to one method, have had to adapt to another. Not unlike like the Mediaeval monk who has to be taught how to transition from scrolls to a bound book in this comedy sketch.
Not that I’m complaining. Much like how the invention of the printing press led to the spread of liberalism, the Internet communications revolution challenges many traditional structures of knowledge and information by removing gatekeepers to access and expression.
Time for me to get back planning more website architecture. There’s information to organize!
Ever wondered what it would look like if you took a Mandelbrot set and made it 3D? Me neither, actually (see next paragraph about ugly-colored fractal art). However, apparently it’s harder than it sounds (to someone like me who knows little about such things.) Anyhow, Daniel White, David Makin, and some other mathematicians came up with a way to do it, and the result is a set of stunning images, some of which I’ll post here to whet your appetite, but more can be seen at Mandelbulb: The Unravelling of the Real 3D Mandelbrot Fractal. (Scroll down to get past the mathy stuff).
Besides their 3D magicality, these images are compelling to me as an artist because they’re colored so beautifully. Most ‘Fractal Art’ is made unattractive to this painter’s eye because of the garish, unsubtle colors applied to it. No offense, fractal mathematicians out there, and I respect your mad skills in math, but your sense of color tends to be gauche, unsophisticated, heavy-handed, inelegant…okay, I’ll stop. But these Mandelbulbs are different. They’re gorgeous. I want to climb inside these places and explore!
Images credit: Daniel White. Click thumbnails to view full size.
I’m telling myself that it’s art. Or could be, at a higher resolution. Whatever way you look at it, I spent the evening making these images using effects you can add to Mac’s Photo Booth application. Some of them are downright creepy. How to here. Thanks to Jimmy Thomas for the tip — and the one at the bottom is us at work today through the ‘compound eye’ effect. The rest are using the ‘kaleidoscope’ effect.
"And he overseeing it, riding peacefully about on his horse while he learned the language (that meager and fragile thread, Grandfather said, by which the little surface corners and edges of men's secret and solitary lives may be joined for an instant now and then before sinking back into the darkness where the spirit cried for the first time and was not heard and will cry for the last time and will not be heard then either)..."
Blue Mouse Monkey is thrilled to announce the launch of the new YourEconomy.org website. Your Economy, a project of the Edward Lowe Foundation, is an interactive resource center designed for users to explore and analyze economic activity in their own regions and nationwide. YE houses more economic data than the U.S. census bureau, and it can depict the dynamic journey of business communities evolving through time. However, the existing website was so complex and confusing that the YE founders had to train users in how the system worked, and they were compelled to manage a continuous flow of queries about usability.
