web.without.words

How do you like my cat? I love cats. Do you love cats because I do. Cats.

Paul — Wed, 23 Jun 2010 00:00:00 EST

The world is full of voyeurs and their counterpart, exhibitionists. The internet has always been a haven for anonymously exploiting our weird fetishes and desires. Ambivalence has become an accepted side effect of this anonymity. Not everything has to be sexual though. For instance, the great love of cats. People love their cats. And when Flickr was introduced in 2004 I'm fairly certain the first photo uploaded was a cat. All of this to say, Flickr has aided in ushering in the advent of the everyone-and-their-cousin brand of photographer.

The rise of digital cameras and the means with which to share them has exponentially alllowed the latent hobbyist or the consumate professional to quickly and easily take a snapshot — the level of expertise and quality is only limited to talent and knowledge.With Flickr , we've seen the rise of super-star photographers (who otherwise might not have had the opportunity or resources to have such large and noticeable impact). It's allowed hobbyists to learn from experts. And novices to become pros. (It's also given us cats — way too many cats.)

Flickr is truly social and community oriented, an avant garde in the medium. Flickr introduced the first useful and integrated functions of the "web 2.0" culture (inline editing of titles and captions, seamless "favorite" buttons and tag updates), implementing the newst javascript technologies to enhance our user experience. While other social media services wanted to give users control over the "personality" of their profiles and pages, Flickr has remained resolute to standards and predictabilty (again, allowing users to focus on the images and the community, not the music forced upon your ears or the pink and red letters that clash so horribly that your eyes bleed).

Flickr doesn't showcase any design or even an elegant grid display system. The site is divided into your "dashboard" — where you can see activity on your account, on friends uploads, your groups/community and what is popular and buzzing on the site in general; and your gallery — where you manage and store your images, sets and galleries. A truly "function first" site. It's neither beautiful nor customizable (apart from a few options on how to show your initial gallery page), but that point is interaction and activity and community; and it's continually shown that change for change sake isn't a good thing.

DESIGN UPDATE

It seems today Flickr has implemented a "soft" rollout of new features and design (opting for a wider layout, utilizing a wider screen width, which accounts for the overall increasing monitor resolutions). The changes are subtle, mostly organization and functional; making it easier for users to geo-locate photos, wider display photos, simplier "social" options of editing, adding to groups or sets, among other visual improvements. It is the first major design upgrade from Flickr in over 6 years (and it was much needed).

Functional, but Ugly

Paul — Tue, 04 May 2010 00:00:00 EST

You grow past that home, but whenever you go back it feels right; maybe it's smaller than you remember, the walls worn and dingy, the carpet more stained, the rooms more crowded and faded; but it's home. Sure the shag carpet and golden sofaset are dated and mostly hideious, but it's familiar and reminiscent.

Then there's Craigslist. The ultimate website that focuses on the functional over the visual. Rows and rows of columns and columns of lists and text and links. No flourish. No fluff. No overdone gradients and embossed boxes with rounded edges and drop shadows. Nothing is unnecessary. But nothing is important. While the goal of any design ough to lead the viewer and participate to join in a journey — the story of your site — sometimes the entire story is spewed in your face and you're left to sift through the mess.

There is nothing remotely remarkable or even pretty about the site. Its nearly void of any hierarchy or presentational invitation to "click". You can click everything. And everything is what you have. Yet to simply surmise the site based on it's lack neglects purpose — one of the most important aspects of any web development and design. The purpose isn't to do anything but present listing of services; exactly like the newspaper classifieds. Sure they could have done "conceptual" and mimicked the printed counterpart, but at the cost of speed, simplicity and functionality.

Some things are what they are — and that's just fine.

Do I know this person?

Paul — Sat, 06 Feb 2010 00:00:00 EST

With Facebook one has the chance to reopen all those old wounds and secretly rejoice in the failings of those that threw stones at you when you went on that end of the year camping trip your sophomore year. Where suddenly those who never wanted to sit with you at lunch poke you, send you plants and even attempt to kidnap you. Facebook exists only to remind us that we're all desperate for friends and peer pressure still works, even at 36.

But I'm not here to commiserate about high school geekiness but rather to dissect the anti-MySpace social networking site. At first glance, with all the text and updates and friend images, Facebook feels as if its haphazard and overwhelming, which in one sense it can be. But when all the nuance of images, colors and text variance is removed, Facebook stands as a solid, fairly organized interface.

Its easy to pile up hatred for anything popular in the web world (for every MySpace there's a Facebook, for every Facebook there's a LinkedIn, for every LinkedIn there's a VIRBº), and become persuaded by what you hear. I'm no different. Facebook isn't as bad as I want it to be -- and believe me, I really want to dislike it. The grid (of the profile page, which you see here) is simple and straight-forward, columns, the middle as the largest with the most relevant and revolving information and the right sidebar entirely for (nearly) seamlessly incorporated ads.

Where the site begins to fall apart is in the header (notice a theme throughout these posts?). At the top most you have a your main navigation (in a different color which makes it stand out without taking over), below there the columns begin; first in left sidebar (containing your profile picture and other profile related information), the main column contains your most recent "status'. There needs to be more distinction made between the "tabs", which are more "pages" of your profile (and inexplicably breaking the established grid system) and the functional, action tabs (which are used to allow users to quickly add photos, videos, notes, etc). The functionality is actually more than expected (using complex AJAX elements for inline updating, etc), but the placement and differentiation of these actions elements could be vastly improved.

Overall, compared to its counterpart, Facebook is a far simpler and far more functional social media website (for the general, at large, user), and if I could find more things to complain about (in its form and function), I really would.

----------
UPDATE
----------
Facebook has recently updated their pages, going for a more compact layout, removing redundant buttons and tabs, creating a much more simple interface (seems as if they heard what I said? Yeah, probably not)

I'll trade my pickles for those cookies

Paul — Thu, 16 Jul 2009 00:00:00 EST

Go to any elementary school cafeteria and you'll see a version of Antiques Roadshow unfold before your very eyes. The lunchroom trade — wherein one boy trades his peanut butter and jelly sandwich for stale Chips Ahoy cookies to another boy who trades that for a Fruit Roll-Ups. We love to find treasure. To happen upon something which we think is worthless that someone else believes is gold. We also love to have other people take our garbage — and somehow get them to pay for it at the same time.

Tapping into that basic natural instinct, eBay taps our inner garage sale super hero. A place where people haul out all their crap from the basement and try to tempt you (in what I call competitive auction-eering) into paying more than you should. eBay is a quintessential brand and a pillar to the worldwide internet for more than 12 years. Its no surprise that during that time its web structure and design has undergone many changes, and until recently has felt out-of-date and overwhelming with the amount of equally weighed content.

The largest challenge for eBay is to present the plethora of items to users with the ability to quickly and easy find what they want. Whereas many current sites use the "Web 2.0" technology as a fancy mask to their lack of content, eBay takes advantage of the technology to show more, with less (employing simple javascript elements such as a scrolling gallery, hover-over "tooltip" call outs, etc).

The site is a modified 3 column grid, with the traditional left sidebar (for categories, browsing and sorting) and main content area. The site effectively distributes the brand colors of blue, red, yellow and green throughout the layout, without drawing more attention to graphic elements and "boxes" than the content itself. Perhaps a bit heavy on the tired and overused rounded corners (to break up the "box" look inherit the markup of the web) as well as unnecessary gradients (a person pet-peeve) but with a distinct delineation of information. Sadly the bottom half the page fails, as many website do, to give a proper "ending" the site. Things slowly fall apart, awkward columns that go on and on, and a footer of text links that drags on like a run-on sentence. No closure, just tired "let's just get this stuff up there".

It would be easy for eBay to throw as much information, lead-in, teaser content on the homepage, but thankfully they've exercised restraint and kept the homepage easily digestible, navigable and functional for its purpose and genre.

Simplicity at it's best

Nathan — Wed, 26 Nov 2008 00:00:00 EST

So how does the design company approach its own design on the web?

First and foremost, Apple brings their unparalleled design aesthetic. That should be no surprise, since it is their chief product and has proven the foundation for the growth of their consumer electronics empire. They stay true to form, and buck a few normative user experience details present on nearly every other major site on the Internet.

Apple's name is hidden until you scroll all the way down to the footer. Their text-less logo is a part of the top navigation, but none of the other corporate giants I checked were so brand-confident to omit the prominent above-the-fold inclusion of their name in conjunction with their text-less logos. Without using a splash page, they also manage to have a home page free of the weight of substantive content. A huge ad, a few smaller ads and some links are their only initial content offerings - a far cry from any other online retailer that approaches their sale volume ($24b in 2007).

The other prominent feature of Apple's website is their attempt to co-opt the color white. Aside from the colors on their products, the site is white, the navigational element cover a range of grays and the text stays in the grey territory with the exception of a pleasant blue (#0088CC) link color, and various international flags in their footer, they offer a completely color-neutral framework.

Of course, Apple's site is not perfect. Leave their home page and you may find yourself lost in a link labyrinth, crowded with box after box of product. But those sins are magnified by the spartan joy of their home page (consistent with their physical products and store). A quick search on "history" leads to no results in their handy insta-results, onfocus search results — it's an odd omission for such a large and storied company to omit any reference to their own history, but that's what we have wikipedia for, I suppose.

As with any well executed product, Apple has plenty of room for criticism in the design options they didn't take. Does their approach leaves sales on the table with it's often airy design? Maybe, but apple.com is about one thing and one thing only—selling design—and on that merit, they hit the mark.

If websites could kill you...

Paul — Fri, 21 Nov 2008 00:00:00 EST

The Drudge Report® was the recent subject of 37 Signals contributor Jason Fried, stating that The Drudge Report® is the best designed sites on the web. I'd like to believe (as do many others) that Jason was pulling our legs, but he swears by his stance. It got my attention (most likely the point of writing just an entry) In order to make any value judgment claims one must have a standard definition of a term or concept — in this case: "design", and then define what qualifies an "effective" and another "ineffective". Without such a common ground of understanding states like "Best", "Greatest" are arbitrary and meaningless. Without getting theoretical about what is and isn't design (and the relativism of creativity), what is and isn't good design, I'll attempt to focus (as usual) on how The Drudge Report® functions on a structural and informational level.

Lets begin at the beginning — the top 620 pixels of the screen real estate are occupied by a large banner ad followed by another large image on top of a 50 pixel bold headline and then the official masthead. I know that screens are larger and that scrolling is insignificant in today's age of scroll wheels and 22" monitors -- but this feels; disgusting. I chose to "crop" this wasted space and focus on the masthead and below, which gets the overall structure of the site.

If one values something for the sake of its lack of conformity and stubbornness then Drudge Report® succeeds in having that web "retro" feel of something stuck in the early 90s (which I think makes the site essentially 567 years old; in web years) — sure its fast, easy, simple to maintain, but its also overloaded with text insufficiently distinguishable from any other text, uneven in column width, random in its use of images and image placement. Drudge Report® is the equivalent of a butterface. The lack of care might to some be endearing, but for me the lack of care in the overall design (which includes structure, grid, hierarchy, graphic elements, continuity and overall "story") is like a book without the plot; artwork without color; music performed by robots.

I'll quote the following (from AIGA's Standards of Professional Practice):

"6.1 A professional designer shall avoid projects that will result in harm to the public."

Amen.

Just because you can doesn't mean you should

Paul — Tue, 11 Nov 2008 00:00:00 EST

I want to hate YouTube, I want to be cool and talk about how awesome Vimeo is comparatively (and they are), but YouTube is the first place I go to look for any video clip of — well just about anything. Sure the video quality is horrendous, and the player is clunky, the comments/commentors asinine and the videos hardly original; but where would I go when I NEED to find a clip of a ninja cat.

Originally a tool for hosting and viewing original video content, YouTube today consists of clips from TV shows and movies, concert footage and music montages — earning YouTube a "stink eye" from Hollywood and the RIAA (but who doesn't the RIAA hate? I suspect they even hate themselves). YouTube also has an active; though what some might consider "unsophisticated", community base. YouTube has become synoymous with online video and "viral" marketing -- making it an internet brand with equity rather than hype.

To my surprise, YouTube is organized, cohesive and fairly simple — considering the vast amounts of information stored within the site (which might be attributed to the influence of company owner, Google). I truly wanted to find more flaws and other than the overused "tab" styled buttons and thankfully limited use of gradients, the content remains easy to read with clearly understood information hierarchy (for links, icons, videos and other information). The content does not feel boxed in or crowded (though what one might consider somewhat "under designed", which again, is not unexpected given the Google link) - opting for lines as dividers of content, light gray for text that isn't as important, bolds and underlines for headlines and headline links. Video thumbnails are consistent in placement and size, while icons are fairly uniform in size, color and style (with a few "rogue" colors and sizes). The overall site utilized a simple 2 column grid (with a "soft" inner 2 column split within content). The purpose of driving users to videos without unnecessary distraction is admirable and well executed, even banner ads fit as well as possible into the overall grid.

Except for the few color deviations (yellow, orange, green), the site remains neutral, if not a tad bland and flat, but giving more reason for the uses to watch a video, than be consumed (or distracted) by less important content or elements.

It doesn't matter if it's accurate

Paul — Sat, 01 Nov 2008 00:00:00 EST

That was when people taught their babies to smoke, burned gasoline in ditch in their backyard, killed deer with dull hammers and believed in something called "God". And they paid for information. Thank goodness for today where our information is free and given to us by a team of regular citizens who gather information based on hearsay, gossip and passed down oral traditions from spooky ghost men.

WikiPedia is an information resource with no need for gloss or glam, but certainly the information could be presented with a tad more clarity or care. Nevermind the clear after thought of "design", but the information is so even and nondescript that the information ceases to be helpful and gets lost in the line by line by line by line nature of text slamming into your eyes. The "navigation" (thankfully so clearly labeled) takes a nice side-stroll with "Search", "Toolbox" and "Languages"; which only are different from the other text in their location in a small box to the left side of page. Images are at the least the same ratio but don't mingle well with their referring text (perhaps make the text that related to images stand out a bit more?).

As a tool, WikiPedia is amazing, regardless of the fact that the "facts" may not be accurate, the repository of information is mind-numbing; but how much more of an enjoyable experience would it be if you there was as much care given to the layout and context of the information as a well designed textbook?

As a tool WikiPedia is amazing, regardless that the "facts" may not always be accurate (or even correct), the repository of information is mind-numbing; but how much more of an enjoyable experience would it be if you there was as much care given to the layout and context of the information as a well designed textbook -- using clearly delineated areas for images, charts, timelines, headlines, etc? Sadly, the glut information contained within WikiPedia allows them to ignore any plea for an effective user interface, thoroughly defined hierarchy, or well implemented graphical language.

If I had the time (and if this site were my job and paid me) I would love to present an alternative design to this projects, to put a solution to the critiques, but since I can't and don't; I'll have to settle with a strongly worded (and hopefully informative) critique.

Out of touch, but still trying

Paul — Tue, 28 Oct 2008 00:00:00 EST

They start calling you "dude" or "broheim" through they're thinning hair, age spotted forehead and coffee-stained teeth in a desperate and obvious attempt to win your approve (when in reality, we ought to be winning there's, but never-mind the worship of youth, inexperience and shallowness), and forget they've had a lifetime to be themselves, a lifetime of trials, hurts, happiness, death, change, with nothing left to prove to anyone, nothing left to market and life that is itself in need of no defense only memory. But peer-pressure doesn't have age limits.

JohnMcCain.com could be worse - much worse, and you'd half expect it to be (perhaps more like this), yet the site somehow manages to neither be awful nor great, neither overly cluttered nor uniformly cohesive. Structurally the site is straight-forward with a soft 3 column grid; unoffensive and clean. The main navigation is standard CSS (using the font Trebuchet-MS), plainly presented and easily overlooked. The overall information structure has no uniformity — no strongly presented color palette (blue, yellow, red, brown, green), no standardized iconography, no repetitive or predictable graphic elements (move from square, to arch, to circles, to boxes with borders to gradients) no hierarchy information (from navigation to main content to form text to links to stories — all the sizes of the text remain similiar in size, weight and format). The right side "action" form is so uninviting and haphazard one is curious how many users never see it.

And that bright green "Click Here". Yikes. It screams "we had a developers meeting and had so many complaints about the button not being 'obvious' that we had to throw in the brightest possible, round button so that 'Joe Web User' would know what to do". Yet another unrelated element and color (and by the way, if you're filling out a form online and don't know to look for a "submit" button of some sort, then you shouldn't be filling out an online form at all).

Perhaps a WordPress theme would be more wise next go around? As I like to say, if you're website is a story, then what story is it teling?

I want you to like me, please

Paul — Wed, 22 Oct 2008 00:00:00 EST

I thought that now would be an appropriate time to do a political (without the politics) website break down. Its not often that a candidate has a website that is so impressive as the BarackObama.com website. Though the grid varies slightly from "box" to "box" and section by section, and the amount of background images and type images teeter on the edge of making it less a website and more a brochure, the overall visual appeal is undeniable. Smooth transitions, even and calm colors with an organic transition from one section to another, an impeccable sense of balance in color, font usage and space.

Compared with the 3 other websites thus broken apart in w.w.w. the BarackObama.com site is far more designed, utlizing space, hierachy, dramatic color interplay and the art of "story". There comes a point where the gradients and drop shadows begin to feel overwhelming, but there are enough "soft spots" for the eyes to rest and the repetition of similar shapes and graphic elements aid in tying all the units into a whole.

Regardless of your political views, BarackObama.com is an excellent website on many fronts.

Less is sometimes more, but not really

Paul — Mon, 20 Oct 2008 00:00:00 EST

As a child Google was a know it all, who thrived on being right. Even in the remote chance of him being wrong, and someone having the fortune to have caught his foible, Google managed to make anyone appear dumb. Yet through it all he remained charming, and endearing to most students - somehow managing to become class president (through process of accumulation, which infuriated his school-time rival Microsoft who did the exact same things but somehow always ended up in the school newspaper or principals office). Google can often be seen looking for his name in the library index cards.

Despite Google's purposeful lack of design and supreme faith in functionality the "main" website remains crowded amongst of vast open space — like 3 people ass-to-elbows in a freight elevator. Why not align text and information page-center and flush left? As monitor resolutions grow (with 86% of screen at 1024x768 or higher) the triangulation of the "header" area, contrasted with the search area becomes tenuous (as the eye finds it harder to "connect" the space the wider it becomes). I've tried to admire the "simplicity" of the site, but find it superfluous.

Don't get me started on the logo (obviously designed by an IT guy who "had to throw something up" as they presented to investors) — I have never ever liked the Google logo ever; but that's not the point of w.w.w.. The overall sense one gets from any Google page; not merely the main landing pages, is that functionality and bare-bones simplicity — reinforced with a sophisticated use of emerging technology in AJAX, etc — trump any infusion of design to enhance the user experience. I do admire their strict adherence to keeping the interface and overall look as simple as possible, and not succumbing to fads and trends, the lack of distractions makes the overall user experience (nearly) fool-proof.

Completely Banal

Paul — Tue, 14 Oct 2008 00:00:00 EST

Church on Sunday's, only cursing when they stub their toe, with 2.5 kids (literally, 1 kid has been sawed in half just to make the statistic apply) with 3 bedrooms and 2.5 baths, working a 9 to 5 and overflowing with acquaintances. But deep down identity-less, aimless and living one day after another without being anything but lukewarm.

Yahoo doesn't seem to be able to decide if its a "search engine", a news site, or a portal for everything imaginable. The icon system is varied, too complex (for their relative size). The images are inconsistent in size and scale, as are the text sizes. The hierarchy feels somewhat muddled and overly bland (using AJAX as a gimmick, more than an helpful tool).

And what don't I like about the site? The header. Again, a header that seems a thrown on after thought (though, I can't say that I have much room to talk) ... it seems like the idea was to hit every corner of the header and leave the "middle" for the logo and search; but the outcome makes ones eyes feel trapped. Yahoo doesn't so much hate you, as it does feel that you (the "average" user) isn't sophisticated enough to find what you need without blinking arrows, shiny buttons and a glut of information.

The big know-it-all

Paul — Wed, 08 Oct 2008 00:00:00 EST

It becomes clear - quickly - that the CNN.com site is content heavy (it is a news site after all). Even without the subtle visual noise that letter-forms create the site feels cluttered and somewhat overpowering; but vastly improved over previous incarnations of the site. To me, the header/top portion of the site feels incongruous with the "fixed" style of the rest of the template.

On the postivie side, the information stays along a visible grid with simliar sizes and line heights. The images also have a clear hierarchy that helps to break up the monontiny of text (the featured story occupying the most space in terms of text and image size). Compared to many other large news websites, CNN.com does the best it can at presenting vast quantities of information to a large and varied demographic while remaining clean, uncluttered and predictable (which is a good thing, really; it is).