White Space is not your Enemy by Kim Golombisky and Rebecca Hagen
White Space is not your Enemyby Kim Golombisky and Rebecca Hagen is a beginning design book. And I purchased it because I definitely need assistance with design. While I (at least I think I do) have something of an understanding of which color goes with which, it is sometimes difficult for me to make something look good. Seeking some inexpensive professional help, I turned to this book.
Practical Help
So apart from the obvious title, the book offers tips on color combinations, font selection, focal points and even how to prepare a document for a professional print job. And the chapter on design sins really resonated with me. I have seen poorly designed advertisements (both online and offline) and websites, and have never really been able to adequately articulate just why they were so hideous. So now I can.
Exercises
The exercises in the back of each chapter seemed, I thought, somewhat superfluous. However, I did find myself beginning to look at designs with a more critical eye. For example, I noticed a print advertisement where the background photograph was of varied colors. Some were light, some, dark. The print, however, was pure white, and cut horizontally along the middle of the photograph. Hence this would have been fine, except the copy crashed straight into a white space, so some of the print was invisible. Which part? The company’s name. Epic design fail.
Foolproof
Another extremely helpful chapter: the one on the “works every time” layout. This layout is all over the Internet and all over print media, and for good reason. It is, essentially, a full width photograph or other graphic across the top third of the screen or page, with the remaining two-thirds divided into two vertical columns for text. A cutline (caption) goes directly underneath the visual (if appropriate; some visuals don’t need a cutline), with a more prominent headline directly below that.
Break up the columns into paragraphs and beware widows and orphans (one or two short words on a line). Place tags (these aren’t Internet meta tags), which are the logo, company name and small nugget of information such as the URL or physical address, in the lower right-hand corner. In addition, round it all out with generous margins all around. Voila! An instant beautiful (albeit somewhat common) layout!
If nothing else, that chapter has a greater value than the price of admission.
Learning Creativity
Creativity cannot, truly, be taught. But the peripherals around it can, such as how to gather ideas and nurture them, and how to place those ideas together in a coherent format. It’s like teaching pottery and smithing but not cookery: you get enough so that you can set the table, but not nourish anyone.
For that, you need to be an artist. And that, sadly, no book can ever teach you.
Designing for the Social Web by Joshua Porter was recommended to me by Kevin Palmer as a good read about the fundamentals of creating and perfecting online communities and social software.
Not How, But Why
The book is less of a how-to and more of a why-to, if that makes sense. If you’re looking for code examples, look elsewhere. Instead, the book covers theory and explains how and why certain tasks need to be done.
Essentially, any social site, whether in the shape of forums or something else, faces the following user hurdles:
Pay attention – users need to have an idea that they want your software, product, services, etc.
Decision to sign up
Input personal information
Pay money (if applicable)
Decide for someone else (if applicable)
Give up the old way of doing things
Back Up a Second
Frankly, there’s even one item before #1, call it #0 if you will: the potential user must understand that he or she has a need. And, hand in hand with that, the potential user also needs to decide to fulfill that need online. Hence if a potential user, say, decides that they want support because they’ve just gotten a cancer diagnosis, but they further decide to only get their support via an in-person group and not an online board then, so far as you’re concerned, it’s game over. After all, not everyone “gets” the social aspect of the web.
Get Over Those Hurdles
Joshua Porter covers the handling of some of these basic hurdles, such as designing to favor signing up and hanging around. One main point he makes is: don’t make signing up too arduous a task. And its corollary: don’t ask for information you don’t need. Far too often, sites ask for what ends up being ludicrous levels of granularity of detail. After all, when was the last time that anyone, really, needed your middle name for you to apply for a job? Yet sites ask for this trivial piece of data. And, even if they don’t require it, that begs the question even further. Why is the field even there in the first place if the site so openly acknowledges that it’s just plain unnecessary?
Eight Seconds to Impress
Porter makes the point all too forcefully: the decision to sign up for an online service is made in eight seconds. That’s an awfully short window of opportunity to convince a potential user that his or her time and attention should go to you and not your competition.
The book abounds with these kinds of helpful nuggets, and is also chockful of references to blogs and books to support the author’s recommendations. The generous sprinkling of citations was helpful as it was a clear signpost suggesting online readings. It can seem counterintuitive to learn about designing for the web by reading a completely offline book. Porter’s work bridges the gap back to the web and lets the reader in on where to find more information situated a lot closer to where the reader is going to be placing new social software or services.
A Quibble
Finally, Designing for the Social Web does not seem to draw an overall conclusion. Rather, the book instead seems to simply run out of gas in the end. It’s as if the author had run out of what to say. Hence a final upshot or even some words of encouragement would have, I feel, helped. But that’s a small issue with an otherwise interesting and eminently practical work.
As a part of the required readings for my User-Centered Design course at Quinnipiac University, I purchased Communicating Design by Dan M. Brown. The book is … okay.
Communicating Design
Communicating Design by Dan M. Brown (cover image is from Amazon)
User-centered design is the act of putting together websites in a way that users will understand them quickly. The last thing a website owner should want is for users to be scratching their heads over how things work. Or, worse, leaving because a site is so frustrating.
Communicating Design by Dan M. Brown takes this idea and brings it back to site development. That is, the reader is given the tools for presenting designs and their various documentations while a site is still in its nascent format.
Documentation
The book spends a lot of time talking about design documentation. While this is all well and good and appropriate, the book also spends a lot of time talking about how to present these various documents at meetings. I have conducted numerous meetings in my career, and so this felt superfluous. But it’s not just that I have the experience; it’s also that the basics of presenting a document at a meeting were iterated and reiterated. After a while, I hope that a designer would understand how to be diplomatic and good at explaining designs and documents and descriptions. Repeating this information grew tiresome in short order. While it is possible that the intention was for the chapters to be used as standalones, the basics of presenting in a meeting were already there. Why not just tell the reader to check back in Chapters One and Two?
He thoroughly explained many documents, though, and about one-quarter of the way through the book, I realized that the process of design resembles that of iterative software development. Stop, start, tweak, start again, etc.
The document types presented were as follows:
Personas
Concept Models
Site Maps
Flowcharts
Wireframes (this was rather helpful to me)
Deliverable basics
Design Briefs
Competitive Reviews
Usability Reports
My rating would have gone higher if I had not already been there, done that, with so much of what was covered in this book. It’s a good, thorough resource for beginners.
Killer UX Design by Jodie Moule is a decent beginning book on user-centered design. The process of user-centered design (at least, according to Ms. Moule) is close to iterative software development.
Iterative Development Model (Photo credit: Wikipedia)
I believe anyone familiar with iterative software development might not need all of the basic information in this work.
Not High Tech Enough?
Further, I found that Ms. Moule pushed for a lot of rather manual and paper-centric activities surrounding design. Roughly sketching out a design or even a set of wireframes might be of great use to designers. However, those of us who really can’t draw will end up with a lot of incoherent scribbles. Visio or even Photoshop or Adobe Illustrator would be the tools for this. Not that I don’t mind a cheaper and probably faster solution. But if all the illustrator can do is barely draw a circle or a square and a few stick figures, these sketches won’t necessarily make anything easier or more comprehensible.
Involving Users
Another curious aspect of the book was Ms. Moule’s push to involve users in numerous phases of the project. This made a great deal of sense. She starts users off with a kind of homework where they write about what interests them in the upcoming project. Users are invited to look at the sketches (again, bad sketches don’t necessarily help anyone, I feel). They are invited to evaluate the manufactured prototype. Also, to beta test the initial product and take it out for a spin. To my mind, the often manual and paper-based aspects of this made more sense. This is because users don’t always have access to the kind of technology, hardware and software, and talent that professional designers have as a matter of course.
Furthermore, the book reads well. However, the end portions of each chapter (and of the entire book) are the only parts you need to know. The remaining details are all well and good. However, since I already knew the basics of iterative software development, they were a bit superfluous to me.
The book is better than average and is certainly of help. Hence readers with less experience with iterative software development will likely rate this work higher than I do.
ICM 502 – Information Design Common to Biblical Texts
Biblical texts are fascinating, as are their designs.
What we today might consider to be problematic designs were much more typical years ago, particularly in the area of holy texts. That’s not so surprising when you consider that bibles were in far wider circulation before the printing press (scribes knew their buyer persona) and that, even after it was invented, there was still a great deal of illiteracy.
The two factors created a condition whereby a lot of prayer books and the like would be lettered or printed, and there would be a lot of illustration so as to help the illiterate faithful follow along.
Modern Design Issues
Design requirements are different now. For one thing, only maybe 14 percent of the US population is illiterate. While that figure is higher than most of us would like, it’s a lot better than it was after the Roman Empire fell, and literacy was a feature of no more than maybe 30 – 40 percent of the populace.
Because we don’t need so many pictures to help us along, Rebecca Hagen and Kim Golombisky, in White Space is Not Your Enemy, offer a list of layout sins on pages 31 – 42:
13 Amateur Layout Errors
Things that blink. Incessantly.
Warped photos.
Naked photos (e. g. they need a border).
Bulky borders and boxes (use hairlines).
Cheated margins.
Centering everything.
Corners and clutter – don’t fill the corners! Instead, group similar visual information together.
Trapped negative space – keep the negative space at the edges.
Busy backgrounds.
Tacky type emphasis – reversing, stroking, using all caps, and underlining.
Reversing – white copy on a dark background
Stroking – outline characters
All caps
Underlining
Bad bullets – use real bullets, not just asterisks or emoticons, and align them.
Widows and orphans.
Justified rivers – don’t use fully justified (both sides) blocks of type. Help eliminate this by increasing column width or reducing font point size, or both. Or just don’t do it!
Biblical Text Designs
When it comes to biblical texts, violations of sins 4, 7, 8, and 9, seem to be common. I chose images outside of the readings as these designs seem to be ubiquitous for older religious texts.
In this image from a Gutenberg bible (Genesis 1: 1) currently housed at the Bayerische Staatsbibliothek, a lot of these sins come to the fore.
Gutenberg bible (Genesis 1: 1) currently housed at the Bayerische StaatsbibliothekKoran currently housed in the David Collection at the Park Museer NE in Copenhagen, Denmark
The border, though lovely and possibly unique, is also bulky (#4) and busy (#9), and clutters the corner space (#7). Negative space is trapped within the border (#8).
Furthermore, the lack of paragraph or verse breaks makes the columns look uniform but uninviting to read. The text feels unapproachable and forbidding.
There’s another bulky border in this image from a Koran which is currently housed in the David Collection at the Park Museer NE in Copenhagen, Denmark. This one has a lot of white space, with no visible spacings between sentences, except for the gold circles. The border feels imperfectly drawn although not freehand. Perhaps it was traced. At least there’s no corner clutter, and the border is relatively simple and not busy, but the design still commits the sin of bulky borders (#4). The large amount of margin space also appears strange. Because this is a holy text, it probably wasn’t meant for taking notes or annotating the text. So why is so much of the space being wasted? Contrast that with what’s inside the borders, where the text is cramped and takes up nearly all of the real estate.
The Gutenberg bible seems to be saying with its design is that illiterate parishioners can follow along, as can young children. The Koran, in contrast, is instead telling its reader to focus on reading and not view any graven images.
“Data that is (1) accurate and timely, (2) specific and organized for a purpose, (3) presented within a context that gives it meaning and relevance, and (4) can lead to an increase in understanding and decrease in uncertainty.”
But is that all there is?
The first part of the definition – accuracy and timeliness – seems to be more of a definition of facts, which are almost the quanta of information. Facts are bits of information, like the capital of Uruguay (Montevideo) or the proverbial price of tea in China (varies).
The second piece – specificity and organization – takes information away from the realm of random trivia and gives it a reason for being. Uruguay’s capital makes sense as a piece of information if you’re flying there or doing business in the country. It could be a fact which is specific and organized for something like winning Jeopardy! It’s not organized for the purpose of passing an Anatomy examination, however.
The third aspect – meaningful and relevant context – further removes it from random factoids and pop culture references. If the air-speed velocity of an unladen swallow will get you over a necessary bridge, then it is utterly meaningful and relevant data. If it doesn’t, then you’re left with just so much cerebral flotsam and jetsam. As Frode Heglund says, “Information cannot exist without context.”
The fourth bit – understanding increases while uncertainty decreases – further emphasizes the idea of meaningfulness.
Information tells you something you don’t already know, and is, to crib from Facebook, relevant to your interests. It’s accurate and timely, too. It is useful for you.
What is the role of design in how we receive information?
On page 6 of White Space is Not Your Enemy, Rebecca Golombisky and Rebecca Hagen say, “Good graphic design does four things. It captures attention, controls the eye’s movement across the page or screen, conveys information and evokes emotion.”
Essentially, what Golombisky and Hagen are saying is that design is one of the aspects of information conveyance as much as body language is a part of verbal and visual communications.
Rune Madsen adds, when talking about William Addison Dwiggins, “…seeing is as important as reading, and … typography and illustration can be used for symbolism.”
A great example is in the Twilight series book covers. Love or hate the stories (in the interests of full disclosure, I worked for the publisher, Hachette Book Group, when Breaking Dawn was first released) the covers are a festival of symbolism.
Twilight Series Covers (image is reproduced for educational purposes only)
Twilight, the first in the series, sports a cover which easily symbolizes Biblical temptation, just as the title refers to an in-between time of the day – analogous to the in-between stage of life the main character, Bella, is in. Furthermore, since the hands don’t quite match, they might be intended to reference the couple at the center of the story. The second, New Moon, with its bicolor flower and dropped petal (which looks like a fresh drop of blood) shows a conflict just as the title refers to a time with no reflected sunlight, when the stars are at their brightest. For the third book, Eclipse, the sun (or perhaps the moon) is utterly blotted out in the title, and the cover image references a fragile and nearly completely broken bond. It is the darkest of the covers. And in the end, with Breaking Dawn (a book added to the series which may not have been originally planned), the cover shows a white queen leaving a red pawn in its wake in chess, a classic strategic game. The title is a hopeful one, symbolizing a new beginning. Yet the queen is not quite triumphant, and in chess, the piece is safe from capture but is also not shown in a position where it can take the pawn.
The covers also move from human contact or at least a human at center stage to another living (possibly dying) thing and then two images of nonliving possessions. Even if a curious book buyer was unaware of the plots in the series, they can readily see from the covers that the story progresses from temptation to conflict and possibly even violence, and the upshot is a possible potential triumph which does not seem to be realized yet. The title font is mysterious and the ‘l’ in Twilight looks almost like a stake in a vampire’s heart.
Through good design, six title words convey a wealth of meaning. Design can do this.
Wireframes describe the contents of a web page and their relative priorities. They help the project team envision the functionality and behavior of different screens, or more commonly, different screen templates. Most renditions of wireframes are laid out to look like webpages.
But it’s more than that. It’s also about understanding user behaviors. What are the use cases? What does it mean when something is colored red, or is made larger?
The Importance of Wireframing in Creating Websites
For web designers and for the eventual users of websites, a mockup is necessary in order to get an initial feel for the development to come.
Wireframing puts together designers’ and coders’ ideas of what users might want. By asking users to review and show how they would use the proposed site, designers can determine whether there are use cases they are missing. Further, they can see if the design is too difficult for the average user to understand and navigate, or if creates, rather than diminishes, user frustrations.
Much like any design or illustration process, having iterations of your design allows you to explore a wider variety of design options to a deeper degree.
These iterations can be made with wireframing and paper prototyping, used together. Paper prototyping is generally used for the initial idea of where certain elements go (e. g. where is the logo placed?), and for iterating several versions of the design. Wireframing then comes in, when more of the design is set and the changes are less in terms of what goes where, and are more along the lines of color, shape, size, and verbiage.
How wireframes differ from and relate to website page design
Wireframing is something of a subset of webpage design. The overall idea of design is not just the look and feel of a site, but also what’s going to be in it, and the basic idea behind it. Wireframing takes those background pieces of information and puts them into a logical order and adds or subtracts emphasis. But wireframing can’t happen until the designer knows what is supposed to go into the actual website.
The relationship between wireframes and paper prototyping
Wireframes show a skeleton view of a user interface. They identify the areas of the screen where content will appear, such as images, text and navigation. Wireframes often include call-outs and notes explaining certain elements of the design in more detail. They are a useful communication tool for design agencies who want their clients to sign off on a design without getting hung up on the colours and images displayed in the user interface.
With paper prototyping, elements can be easily moved around. Users can often relate better to paper, and the effort and skill needed to put a basic rough sketch on paper (even when the lines aren’t straight) are less than those needed for wireframing. Paper prototyping, in general, is a quick and dirty solution; it’s a thumbnail sketch, quite literally, of what the site is supposed be like. Furthermore, paper prototyping is a way to get all of the members of a team to be able to contribute equally. You don’t need to understand or have even heard of visual design software in order to sketch a few rectangles, circles, and arrows; cut out shapes; and add verbiage as needed.
What is paper prototyping?
One company that understands the virtues of paper prototyping is The Mathworks. They used paper prototyping when creating GUIDE for MATLAB 6.
(early paper prototype for GUIDE for MATLAB 6. Image is provided for educational purposes only)
The concept of prototyping a solution is well understood. The problem is that code is expensive to write, and all too often a “prototype” takes so long to develop that there is no time to get feedback on the idea. As a result, the prototype simply becomes the product. Paper prototyping provides an alternative that is cheaper, faster, and more effective for the purposes of ensuring the final product meets user needs.
Ms. Rettger’s explanation is simple and practical. Why spend months on making a working prototype, when paper prototypes can be banged out in perhaps a week? That same paper can be altered, added to, or subtracted from, with ease. When following iterative website development methodologies, paper prototyping is the only way that makes any sense. As ideas are added or discarded, or morph into new ideas, the paper prototypes change. More sheets of paper are used and the design readily evolves. As a result, when it’s time to make a true working prototype, a lot more information is available to the designer.
“Where does paper prototyping fit into the design process?
There are two dominant uses:
The design team uses paper for their presentation to a larger group of people who have a vested interest in the product.
Users run through a set of existing paper mock-ups or are given blank paper and asked to represent a concept by sketching it.”
Potentially, the presentation of a paper prototype is a means for the design team to initially communicate with project stakeholders, including persons at the vice presidential level or even the board. For smaller companies, the audience might even be the owners and/or founders of the company, or even the investors. With a paper prototype, a meeting can be put together quickly, as the design and mockup can be put together quickly, too.
The place for wireframing is in a subsequent meeting. The stakeholders are closer to being convinced, and have a good idea of what the site is going to look like. They have a good idea because the designer does, and a paper prototype has been used to give the designer and the stakeholders that very idea.
Paper prototyping is built for speed; wireframing is for providing users with more sophisticated visuals. Both are integral to successful user-centered design.
Quinnipiac Assignment 08 – ICM 552 Dark Patterns in User-Oriented Design
Doostang versus Amtrak
For Social Media Ethics class, we were asked to compare dark patterns, which are designs which are put together in order to trick users into clicking on something (often to sign up for something they don’t want).
Doostang
Doostang is a rather unfortunately-named jobs site, claiming to have top financial and consulting jobs. Attempt to apply for a job through them, however, and you’re passed to a sign-up screen. Fair enough, a lot of jobs sites require an account. But this one’s just a little bit different.
Doostang sign up page
Instead of defaulting to selecting the free sign-up, or not selecting any of the radio buttons at all, Doostang defaults to signing its potential customers up for a $9.95 “Premium” 2-day trial.
But wait, there’s more!
And it doesn’t make Doostang look so good. The Better Business Bureau has quite the file on Doostang, and rates them a D-. What’s the most common complaint? Billing and collection issues. A complaint dated January 21, 2014 says it best:
Complaint: I never agreed to automatic renewal or recurring payments. As can be seen in my usage history, I did not know I had a membership to this site, and never used it. At no time did I authorize recurring payments.
Desired Settlement: Please refund all monies taken after the initial payment. Please do not make me take additional action.
Business Response: Doostang is very clear in stating that all memberships are automatically renewed unless canceled. Members may cancel their subscriptions at anytime.
This is one of Dark Patterns’s classic forced continuity complaints, and it’s also a roach motel, in that it’s deceptively simple to sign up for a Premium service on Doostang, but it’s a real bear to get out of one.
Amtrak
Amtrak, like many other common carrier transportation companies, offers the user the option to purchase travel insurance. However, the option is just that, an option.
Amtrak travel insurance purchase page
While the questions about buying travel insurance are set off in a different-colored box, and you must pass through this screen and make a decision before you can pay for your ticket, Amtrak doesn’t choose either travel insurance option for you. Instead, you are required to decide, one way or the other. There’s no question that Amtrak is trying to make the buying of travel insurance seem like a smart thing to do. But the consumer isn’t beaten over the head with numerous dubious reasons to make the purchase, and the screen is easy to understand.
Turning Doostang Away from the Dark Side
Doostang has two jobs to do, possibly three.
Eliminate the preselection of anything on the sign-up page, or default to the free option. Clearly explain why a job seeker would want a Premium option. End forced continuity.
Make it easy to cancel an accidentally added Premium service by adding online cancellation options and lengthening the time a consumer has before a full refund is no longer permitted. Close the roach motel.
(Optional) Add more free services. Currently, Doostang only allows for applying to one job under the free service. This is the job connected to the referring URL. What if the free service was expanded, say, to that entire session, or for three job applications? A consumer just surfing in from a referral URL would never pay and, perhaps, would be served more advertisements. But someone clicking around, applying to a few jobs or opening up a long session would be using more valuable materials. Complaints of not knowing they were signing up for a paid service would have a lot less credence.
