 Christopher Butler Strategy and Resourcing Hi, I'm Chris. I've been working at Newfangled since September, 2004. | Chris Butler's Blog |
 | Subscribe to this blog Click this link to view blog as XML. View a list of all Newfangled blogs >> Subscribe to all Newfangled blogs >> |  | Search Chris' blog |
Prioritizing Content and the Fear of the Fold
November 17, 2007 at 4:20 pm by Chris
When planning a website, it is easy to get caught up by focusing on two major goals that often contradict each other: getting as much content on a page as possible, and by all means, making sure that content is above the fold. I suspect that the common fear of the fold is often supported by statements like the following:"One of the most important aspects of Website Usability is keeping content above the fold so users are not scrolling up and down your web pages. This is absolutely essential when it comes to the home page. People just don’t scroll on the home page."To be fair, the article from which I pulled this quote goes on to make some very valid and important points. However, it is imperative that we take advice like this in the appropriate context and with a hefty grain of salt.
On that note, a bit of a digression is in order. Ads. Personally, I have no interest in online advertising and am not convinced in the slightest that banner ads do what they are supposed to do. However, I do suspect that they could be a significant barrier to what your home page's goals are. If they are big enough, they will push down your content to make room for their greedy selves. Consider it this way: you are moving your content out of the way to make room for someone else's content- so it better be worth it! Now, if they are not hurting you by pushing your content out of the way, they are also probably not helping you build trust with users (that is, if they even notice them). Just in case you were wondering, CNN.com can get away with losing almost 100 pixels of vertical real estate to advertisers because they have designed their homepage to supply the most critical info (their main navigation, lead story, 15 latest news stories, and video links) above a fairly shallow fold even though there is plenty of important info below, and oh yeah, because they are CNN. Since you're not as huge as CNN, you're just going to have to be a little smarter. The key to dealing with the fold is prioritizing your content. The more content you have, the less likely it will be to get it all above the fold (and remember, the fold is different depending upon the user's vertical screen resolution, so we could be talking about anywhere from 1200 pixels to 600 pixels). If there is an element, whether some copy, a link, an interactive element, or anything else that is critical to the user's experience of your website, it should probably not be below the fold if you can help it. The key is evaluating what is absolutely critical with the understanding that not everything can be critical. Obviously, navigation is critical, so we can get that out of the way. 
On a news site, showing the variety of media might be critical, so having at least some of each of the text, video and audio features above the fold might be important just to show a user that these items are available. However, even the New York times is willing to let its video module exist below the fold (note though, that an advertisement of equal size gets vertical priority). For a site that exists to market and support a product or service, like most of our clients, some considerations will differ from those above, but for the most part, the need to prioritize content is the same. Take our client, Imprivata, as an example. On their home page, they make sure that their 'elevator pitch,' major service benefits, link to a demo, newsletter sign-up and upcoming webinar link are all above a 768 pixel fold. However, they have a significant amount of important content below the fold, but the decision was to prioritize what they felt was critical to a new user understanding what they offer as well as a current customer getting the support and info they need. Another of our clients, Directorship, takes a similar approach to CNN. Within a 768 pixel vertical fold, they squeeze in a large banner advertisement, an even larger callout for their major forum event, The Directorship Institute, the main features of the site, the current issue and lead story, as well as at least one video and news story. Any user will immediately get the gist of what Directorship has to offer, though the majority of their vast amount of content exists below the fold.In general, I can't recommend Steve Krug's book, Don't Make Me Think, enough. We use it as a foundation for how we approach web design and development at Newfangled and feel that Krug's points are routinely proven by our experience in the industry. If you've ever spoken to one of our project managers about a project, you've probably heard the words of Steve Krug (perhaps paraphrased) without even knowing it! If you are involved in any web project, pick up a copy as a worthwhile investment. If you don't read it, pay attention especially to these points about prioritizing content. Because content is the most essential aspect of your web project, is is critical that it be organized and refined within the constraints of issues like the fold so that your goals are fulfilled (remember, your goal should be to identify your website and its purpose, establish trust, and provide functionality that will aid the user in getting the value your site proposes to offer). |
Tags: web-development user-interface-design design
 |  |  |  |  |  |
Article Length and Content Strategy
November 13, 2007 at 10:00 am by Chris| Here's a good article by Jakob Nielsen about article length and online reading. I'll take the advice and keep this post short to balance out all my long articles posted recently... |
Tags: web-development strategy user-interface-design
| | | | | |
A Permanent Work in Progress
November 9, 2007 at 7:30 am by ChrisI borrowed the title for this post from Harry McCracken, who used it in his Techlog column in PC World's December issue. He writes:"More than any communications medium before it, the Web is a permanent work in progress that's always new." 
McCracken goes on to write how current technology is allowing for more and more connectivity throughout the world, and what that will mean for consumers and ISP's. In fact, he notes that the United States is not necessarily on top in terms of the average user's connectivity power. For example, the Communications Workers of America reports that the average American download speed is 1.9 megabits per second, far less than 61 mbps in Japan, 45 mbps in Korea, or even 7.9 mbps in Canada. However, his comment also generally pertains to the core of what the internet really is, and the reality that we confront daily at Newfangled as we develop technology for use on the web. The web is a work in progress indeed, and that means that everything we build for use on the internet is also a work in progress. Your Proximity to the 'Net
However, this potential 'omniweb' may not be such a great thing for those of us who like having some boundaries between our work and time off. I can't help but fear that someday 'not having access to my email' or 'not being in cellphone range' might not be valid reasons to not work while on vacation, or that no matter where I am in the world, I might be easily findable. I also wouldn't mind being able to escape from the ubiquity of technology every now and then, either, but from the looks of things this is going to only become more difficult. Even now, we'll soon be seeing good ol' Google at the gas pump. Helpful, yes, but just one more step towards an all-Google-all-the-time lifestyle... Your Proximity to Me Via the 'Net Another aspect to this work in progress is that because internet access is available in more places, more can be accomplished (theoretically) by more people in groups regardless of the locations of individuals. One immediate caveat I would propose is that often work relationships are enhanced by personal, face-to-face contact (see my post, 'Social Media Tools and Synthetic? Communities' for more on this). However, I also was able to work for Newfangled for an entire year while living in Penang, Malaysia, thanks to Telekom Malaysia, Skype, and my Dell laptop. Oh, and of course, the flexibility of my employers! 
Being thousands of miles away from friends, family and co-workers didn't seem so extreme because I was able to communicate with everyone so easily. I would call people using my Skype Out account and nobody ever seemed to notice. In fact, I'm not sure I ever used a landline while I lived overseas! Motoring down many streets in Penang also demonstrated to me that others were catching on, as a common sight there were many support centers being set up by companies like Dell, SeaGate, Sony, etc. (So, don't be surprised if a friendly Malaysian helps you next time your gadget's on the fritz.)This proximity idea has also enabled us to serve our clients better. We can now more efficiently work with one of our agency partner's clients, even if they are in Dublin and we are in humble little Carrboro, NC. For example, in addition to having integrated VPBX phone systems and BlackBerry's into our daily work life, we also use Adobe Connect frequently to demo our CMS to prospective clients, as well as to conduct training sessions to current clients without having to be in the same physical location. Other tools, like Mantis and DotProject allow us to maintain active projects even when the client, agency, developer and project manager are all in different places. It's Still a Work In Progress Despite all these achievements and potential, the reality is that the internet is still a work in progress. GMail will still go down sometimes. Google Maps will still not find a location every now and then, or leave you frustrated by bad directions. Facebook will reorganize your photo albums by accident. Your blog will disappear. The site you're on might not work in Internet Explorer but will work in FireFox (or maybe the other way around). Your BlackBerry just won't work when you're in the ski lodge. You will get spam. Lot's of it. Embarassing spam. Your email newsletter won't look the same in everyone's inbox. Your video might not play back perfectly. Your online store might need to be rethought now that a new payment gateway is available. I could go on and on... Suffice it to say that on the 'net you will have problems, but the point is that the internet is a work in progress and we are all participating in the effort to make it better... except for the creators of the animated mortgage ads. They are making the internet worse. |
Tags: the-future web-development social-media software google
| | | | | |
A History of Facebook
November 7, 2007 at 12:30 pm by Chris| In relation to my post from last night, here is a Brief History of Facebook... ...but is it possible that Facebook's days are numbered? |
Tags: web-development social-media software
| | | | | |
Google's Social Design Best Practices
November 7, 2007 at 8:30 am by Chris
In reference to their recent OpenSocial announcement, Google has added an article within their GoogleCode database entitled Social Design Best Practices, which lists 9 concepts and ways to integrate them on the development level. Read it here. Here's a link to the OpenSocial Blog feed. Here is the YouTube video of the Google OpenSocial Announcement: |
Tags: web-development social-media design google
| | | | | |
Social Media Tools and Synthetic? Communities
November 6, 2007 at 8:30 pm by ChrisMy title for this post clearly betrays my underlying ambivalence toward social web communities. However, before being too critical, I think it's important to distinguish between two different types of social web interaction that seem to make up the social web movement in general. 
One type utilizes existing communities and social momentum for the purpose of gathering and organizing information (think wikis and such), while the other attmepts to create communities using online technology and connectivity (think MySpace or Facebook). One could perhaps argue that some widely used applications bridge the gap between these two types in various ways, like Flickr, YouTube or LinkedIn, but that's a discussion for another post.It seems to me that the applications which attempt to utilize our innate desire for community and group participation for the purpose of achieving difficult goals, like organizing information on Wikipedia or providing up-to-date reviews of businesses in the context of mapping software, are doing something positive. They harness our existing interests, knowledge and skills and connect and inform people in a way that was previously geographically impossible. I do realize that many critiques have been brought against Wikipedia, as to whether allowing just anyone to contribute leads to its overall unreliability, but the concept of using technology to allow many otherwise unconnected people to build an information resource is a good one. One general aspect of these tools that I appreciate is that they don't have to get personal in the way that MySpace or Facebook inherently do. In other words, tools like Wikipedia or Google Maps are not ultimately about you or me, but the particular content that we are involved in gathering and organizing, where as my Facebook profile is ultimately about me. I'm not saying that personal is bad, but it's the personal context that can lead to overexposure, lurking (voyeurism, as Eric explored in the first portion of his newsletter, Social Media- Madness?) or false expectations for friendship. This notion is important to a tool like Diigo, which allows anyone to post public or private comments on any website on the internet, but also allows you to control when you see those comments. Imagine how frustrating it would be if you couldn't turn Diigo off- all of the sudden your entire web experience would be overrun by the noise and distraction of other Diigo users' comments! That would definitely be too "social" for me. 
Another consideration is that for most social media tools to be successful, web users need to be comfortable with a certain level of transparency in their online behavior. For people just a bit younger than my generation, this does not seem to be a problem. However, for many it is. For instance, I was a bit shocked when a 'Web History' link appeared at the top of my Google account, and I realized that Google was now interested in collecting and saving my search and browsing history for its ever-growing cache of data (Ryan Naraine explores his suspicions of online privacy policies in his first point in The 10 Biggest Web Annoyances in this month's PC World magazine.)I've spent the majority of this post focusing more on the first of the two types of social media that I differentiated, mostly because I still don't know what to make of the second type- social networks like Facebook. It's obvious that they are not going anywhere. In fact, despite my long standing reluctance to join, my younger sister finally convinced me to create a Facebook profile because I was at that point "like the only person in the family" not listed. So here I am, actively maintaining my profile and, I have to admit, liking it. I've "reconnected" with several people I haven't heard from in years- some even a decade, and it's really neat to see how these people have changed and grown and all the interesting things they're doing. Yet, I'm still wondering to what extent we've reconnected. 
Mark and I recently did a "tour" of New England for a couple of days of client meetings and we both remarked to one another that engaging with our clients in person makes an incredible difference in terms of the quality of our relationships. Because our clients are all over the place geographically, the majority of our contact is over the phone, web meetings or email. But, on the rare occasion that we can meet face to face, something unique occurs that is difficult to articulate. However, I know that the effect is a greater sense of intimacy, trust, and care, and this makes me reflect upon the kinds of connections made through online social networks. Sure, my Facebook friends and I can check up on each other through our profile pages, send messages, play games and even make new "friends," but are we really a community in the way most people want to be? Is there intimacy in the way there is when you are physically present with a person? Don't worry Facebook friends, I'm not necessarily trying to build an argument against Facebook- I'm really just throwing these questions out there because I'm not entirely sure of the answers myself.Perhaps this is the direction in which social activity is moving and I need to get with the program. I just can't help but feel that there is a qualitative difference between the sound of someone's voice and the words on a screen, or the physical presence of a person and an image of him or her, or a smile from a mouth and an emoticon. Or maybe I should learn to stop worrying and love the social web- after all, thanks to Facebook I am in touch with some of my high school marching band friends...
Update (11/7/07): I recently saw Into the Wild, and there is a great scene in which the protagonist is describing his desire to move to the wilderness of Alaska, and his friend replies, "Ok, we're in the wild... what are we doing?" This is exactly the kind of question I ask about social media. I have my Facebook profile, I've gathered friends, posted images, now what? Here's the Into the Wild trailer, where you can see the scene I described above: |
Tags: web-development social-media software
| | | | | |
OLPC Competition
November 2, 2007 at 12:45 pm by Chris
It's been known for a while that Intel was planning on introducing some competition to the educational-laptops-for-developing-countries market. In fact, Intel has apparently already produced and shipped many of them to markets in Central and South America. A major difference between the Classmate PC and the OLPC is that Intel's machine runs with Windows XP, rather than the XO platform. It's build to be durable, like the OLPC, too. According to initial reviews (here's one from CNet), the Classmate is probably more comparable in specs to the Asus EEE than the OLPC, though.
Here's a YouTube demo of the Intel Classmate PC: |
Tags: user-interface-design computers
| | | | | |
Organizing Lots and Lots of Content
November 1, 2007 at 5:00 pm by Chris
In September, we went live with Directorship.com, a large-scale project we began work on in January. Directorship Magazine is a publication with leading business and management content for board directors, global business leaders, governance experts, and shareholders, and they needed their website to be a powerful enhancement to their publishing business.While this site could be a case study for just about any of our NewfangledCMS applications (it has Password Protected Content, RSS Feeds, Advanced Website Tracking, Email Newsletters, Google Optimization Tools, Calendar of Events, Date-Based Publishing, Surveys, Polls, E-Commerce, Blogs, User Account Management, Personalization, Data Importing and Exporting, and lots of Custom Applications), as well as our Prototyping process (I posted recently on prototyping, and Mitch and I spent 6 months prototyping Directorship.com!), I really want to highlight two aspects of this project's user interface. In the next two short paragraphs, I'll discuss how a tagging system and a unique search interface make this site something special. 
TagsTags really are the backbone of this site. Because it has such a large amount of content, the user interface needs to depend upon some kind of common thread that is more flexible and specific than the traditional navigation systems. Using tags, this site is able to connect most of its various types of content while still organizing it by general categories (magazine articles or news articles) and dates. You'll notice that on any article detail page, a 'Related Content' box serves up links to related articles, blogs, webcasts, etc. based upon having tags in common (see image to the left). The more tags in common, the more 'related' content is. The tags also control how advertisements are placed throughout the site. By tagging advertisements, Directorship is able to more appropriately match ads with content, and offer their partners sponsorhip opportunities rather than just basic participation in a pool of circulating ads (though they can do that too). You'll also see a tag cloud being used as a search option in the unique Advanced Search tool we built. Which leads me to my next point... 
SearchAs we prototyped this project, we quickly realized that our standard approach to site search was not going to be adequate for a site with such a large amount of content. While the architecture of the site was already at a point that would be very useful to a navigation-oriented user, we needed something more robust for those users who are more inclined to use a search utility to find what they're looking for. We initially set up an 'Advanced Search' page that was linked from a global navigation menu at the top of the site. This way, anyone could use the basic text search on the main navigation bar, or click to the 'Advanced Search' page if more refinement was necessary. However, we also realized that many searches are going to be refined by the user already being on a particular page of the site, so having to leave that page to use the Advanced Search wasn't very helpful. What we needed was an advanced search tool that would be available on every page but not take up valuable screen real estate if it was not being used. 
After we sketched this out, our Developer, Steve Brock, created an elegant ajax Advanced Search tool (see above left) that allows any user to search using a variety of criteria, and even employs a tag cloud as a search option. Justin Kerr, our Creative Director, organized, simplified and styled it to be as easy on the eyes, and as easy to use, as possible.We've continued to improve Directorship.com even since it went live in September. We've added some new functionality, including rotating 'article center' boxes on the homepage that serve up articles based upon sponsorship and tag relevance and using tags to relate opinion polls to particular articles and news stories. Take a look! |
Tags: newfangled web-development tagging user-interface-design design prototyping
| | | | | |
My Next Do-it-Yourself Project
November 1, 2007 at 4:10 pm by Chris| For my next Weekend project, I'll attempt to make one of these handmade messenger bags out of recycled plastic bags. My main motivation for doing this is save Mark from any further embarrassment by me carrying my current laptop bag - a $25 cheap Burton backpack I ordered online - in to new business meetings. |
Tags: design art
| | | | | |
Do-it-Yourself Tape Wallets
November 1, 2007 at 3:10 pm by Chris
I love to make things by hand. So, when I stumbled upon Make Magazine the first time, I was interested, but everything they wrote articles about making either looked way too complicated, or way too unnecessary (homemade robots that do your vacuuming?). In general, though, their attitude that you could potentially make anything you need from materials that might get thrown away or used for something else sat right with me.Anyway, fast-forward a year or so to me sitting on my couch searching for nerdy things like "typography documentary" and "do-it-yourself" on YouTube, and I find a video by Make Magazine in a series called "Weekend Projects." Each video is under 10 minutes and gives you simple instructions on how to make something yourself over the weekend. The topics range from making your own messenger bag out of plastic grocery bags to making your own magnetic rubik's cube. Like I said above, some of them are maybe more complex than what you'd want to attempt on a Saturday, but others are definitely feasible. 
I figured the tape wallet would be a good one to do as I tend toward being pretty stuffy in my appearance and my current wallet wasn't necessarily conforming to my motto above (unless you count the conceptual value of my debit card since I almost never carry cash). Not being a huge fan of duct tape apparel, I went for the clear tape approach (see image to the right), and used images from National Geographic to make the outer cover. The large currency pocket and smaller card slots are made from strips of 'tape fabric' (Make's term for sticking two pieces of tape together) that let's you see the contents of your wallet. Notice my last bit of Malaysian currency left over from when we lived there- RM1 equals about $0.25, roughly half the cost of this wallet! I kept my wallet less wide than your average wallet, so the card pockets had to be oriented vertically instead. I chose to put one on each side of the wallet, but you could easily layer the pockets and have up to three on each side. 
Clear tape is pretty forgiving since it shows more of the contents of the wallet, which keeps you from scrutinizing the edges, any bubbles that form, or any grit or fingerprints that get stuck within your "tape fabric." We also bought some semi-translucent strapping tape and tried that (see image to the left). This tape doesn't reveal as much of the paper you choose, but it does have more of a "space age" look to it. It's also a bit tougher to control since it has threads within it that can fray easily and be tough to cut cleanly. I started with a couple of cool energy diagrams from an old Life science book, but once I had taped on the currency pocket and the card slots on the back, not much of its detail was visible anymore. Then I added a couple of layers to the front, including the text "A Century of Exploration." This one ended up slightly thicker than the first one, since the strapping tape is much thicker and fabric-like than typical clear packing tape. There really isn't much reason not to try this! It only takes about 30 minutes to make the wallet, and only costs about $1 to pick up a decent roll of packing tape at your local dollar store. Give it a shot!
|
Tags: design art
| | | | | |
Simplified OS with Web Apps Only
November 1, 2007 at 12:10 pm by Chris
The Everex gPC is yet another super-cheap computer that simplifies its offerings down to the bare essentials while relying on already established and popular web-based applications for user productivity. The gPC is Google-approved and costs only $198 and is available at your local WalMart. Just don't look at it, because it's really, really ugly. The gOS itself is nicely done, taking most of its cues from Apple and Microsoft.- - - - - - - - - - - - - - - - - - - - Update: Here is a nice review by Ben Crowell, who recently ordered and received one of the gOS systems. |
Tags: user-interface-design computers
| | | | | |
Your Next Next Computer?
November 1, 2007 at 12:00 pm by Chris
The Asus EEE is another example of an ultraportable computer that is pushing the boundaries of what is necessary for most users in terms of computing power, speed, and user interface. I think most people will be attracted to its sub-$400 price tag as well as its size. However, while I like that it's been pared down to the necessary apps, the storage space is pretty small and my guess is that most people won't plan for those limitations prior to buying a computer like this.What I like most, though, is that this Lynux-based platform is now just one of many, many open-source operating systems. I wonder how long it will be before the combined effect of the many open-source OS options start to erode the empire of Microsoft and Apple... Here's a video review: - - - - - - - - - - - Update: Here is a very in-depth review from NotebookReview.com. |
Tags: user-interface-design computers
| | | | | |
1 Laptop Per Child
November 1, 2007 at 11:00 am by Chris
|
This isn't exactly news (Able already blogged about it 
I like that the XO Sugar interface (pictured right) has simplified most options down to basic and easily interpreted images, rather than using text and multi-tiered menu systems. This covers what could be a really tough problem of languages and dispersing the technology to many countries. I also like the focus on connectivity and gathering groups of users/laptops based upon operations. From what I can tell, the OLPC browser is adequate- it defaults to Google's search page and cuts out the address bar from the interface. One thing I noticed in the demo (see below) was that the XO interface allows a user to see only one process at a time, which might seem like a step back to those of us used to multitasking with many windows open at once, but is probably a good idea since the computer was created for educational purposes and limiting this might cut down on distractions.Tags: user-interface-design computers
| | | | | |
RSS