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.
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:
Wireframes (this was rather helpful to me)
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. What was probably of most interest to me was how close the process of user-centered design (at least, according to Ms. Moule) is to iterative software development.
I believe that anyone who is familiar at all with iterative software development might not need all of the basic information provided 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. While roughly sketching out a design or even a set of wireframes might be of great use to designers, those of us mere mortals who really can’t draw are going to end up with a lot of incoherent scribbles. My understanding is that 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.
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, and 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, as users don’t always have access to the kind of technology, hardware and software, and talent that professional designers are going to have as a matter of course.
Furthermore, the book reads well. However, the end portions of each chapter (and of the entire book itself) end up as really the only parts that 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.
Naked photos (e. g. they need a border).
Bulky borders and boxes (use hairlines).
Corners and clutter – don’t fill the corners! Instead, group similar visual information together.
Trapped negative space – keep the negative space at the edges.
Tacky type emphasis – reversing, stroking, using all caps, and underlining.
Reversing – white copy on a dark background
Stroking – outline characters
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.
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.
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, 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.
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.
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 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.
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.
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.
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.