Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

August 13 2013


Designing with Code

To code or not to code? For designers, that’s a very contentious question. Clients like designers who code because (among other reasons) that’s one less body on payroll. Design advocates, on the other hand, often see code as a technical limitation that stifles creativity. To make matters worse, the information ecologies we all work in refuse to stand still. By looking carefully at some of our favorite arguments, however –and by taking them within the context of our ever-evolving digital landscape –we can begin to make a case for when working in code makes sense.

Several years ago, Andrew Maier penned an article on the use of prototypes in website design and development. In light of my own recent work in prototyping, one of the comments to that article stood out:

Any kind of prototype that involves programming or markup sounds scary to me –that’s the fastest route to a “developer-y” looking site rather than a truly designed –graphically as well as functionally designed –site.

This comment caught my eye because it is the same concern I often hear today, a full three years later. And here’s why this is a big deal: given the content and information architecture challenges that the responsive, multi-context web presents there are now better reasons than ever before to integrate coded prototypes into the design process. By paying close attention early on to the integrity of the narratives we create at the most basic level of communication, we can build the foundation necessary to effectively articulate those narratives far and wide.

Why we’re afraid to commit

If pressed to describe their relationship with code, many designers would hunt around for the “it’s complicated” checkbox. We may have already been sold on prototyping (see Todd Zaki Warfel, Jeff Gothelf, and Stephen Hay if you’re not yet convinced), but we’re still afraid of our beautiful UX getting all bent out of shape and smudged up by an engineering toolset (and mindset).

The source of this dread is no mystery. In his seminal 2004 book on design in technology, The Inmates Are Running the Asylum, Alan Cooper writes that “when engineers invent, they arrive at their solution through a succession of practical, possible steps. Because of this, their solution will always be a derivative of the old, beginning solution, which is often not good enough.” Cooper goes on to argue that interaction designers are in a unique position to break this cycle of derivative solutions by “keep[ing] a healthy suspicion of all assumptions about what cannot be done.”
Whether they’ve read Cooper’s book or not, many designers have implicitly heeded this advice and translated it into an “I design it, you build it” workflow. In many cases, this delivers the results Cooper promises: designers and developers frequently challenge one another to synthesize new ideas and novel solutions –ideas and solutions neither of them would have been able to come up with on their own.

What’s different now

With the growing need of responsive web solutions and adaptive, flexible content, there are new reasons for designers to roll up their sleeves and get into “code.” Since HTML is, at its core, a layer of description wrapped around content, working at this level helps designers think more critically about their content and about the architectural implications of that content. While considering markup won’t replace our content audit, user research, or taxonomy work any time soon, it can increasingly function as an important part of the design process.
HTML prototyping helps us discover and vet the IA step Information Architect Dan Klyn refers to as “choreography,” or the “appropriate unfolding” of content: the link between taxonomy and the interaction-level design typically represented in prototypes. When we address the architectural underpinnings of our content’s choreography early on, we ensure that we haven’t driven off course, and left our intent on the side of the road. What’s more, the benefits of HTML prototyping present themselves when we apply even the most basic of HTML’s elements. Creating a linear, semantic document calling out our navigation, header, teaser, aside, and paragraph elements forces us to think critically about how these elements relate to each other in context.

Now look at that same document on a tablet, or on a phone. Does it tell the same story? Does (should) it follow the same choreography? We might find that our content needs to break into summaries or teasers at different places in different contexts. We might also find that the navigation patterns that work on a phone are overly simplistic with regards to the desktop experience. Each of these insights forces us to think about how our content models need to adapt to accommodate new contexts. (For an in depth and practical look at creating content models, see Sara Wachter-Boettcher’s Content Everywhere.)

Why it matters

In her brilliant book Content Strategy for Mobile, Karen McGrane encourages us to stop thinking about content in terms of “pages” and to start thinking about it in terms of “packages.” A content package might contain things like long and short headlines, teasers, summaries, body copy, and pull quotes. Early HTML prototyping helps us decide which of these elements we need –and helps us think of them as pieces that combine across contexts to create a cohesive experience.
Whereas many of the excellent, commercially available prototyping tools are centered around interaction and design, early HTML prototyping is a way for us to begin to prototype our information architecture –and to test the architectural hypotheses we’ve laid out in our conceptual and taxonomy work. It also puts us in the right frame of mind to break out to the page metaphor.

In her keynote at DrupalCon in May, Karen McGrane traces the history of the page metaphor. This ubiquitous concept comes to us –surprise –from Xerox, maker of printers. Of course they would think about content in the digital age as coming together on pages: pages have been the cornerstone of their business for over a century! When we move to thinking of content as a resource that can be pulled into view when and how it is needed, we’ve already taken a huge step toward creating the responsive and adaptive information environments we need to meet the demands of the mobile ecosphere.

How to get started

So how can you get started designing with code? Both Jeff Gothelf and Stephen Hay stress the importance of sketching. I’ll reiterate that here: although our goal is to eventually end up in code, sketching out your rough ideas before diving into markup will keep you from committing to mediocre ideas you’re reluctant to change because they’re already saved to disk.
Use pen and paper or a whiteboard to work out a hypothesis and then write your markup to match. Does it work with your content? Check it out on mobile, on a tablet. Revise and refine. Consider how your content needs to adapt to convey the same concepts in different contexts.

There’s no way around the fact that you will need to understand the basic elements of HTML and CSS. Fortunately, these are not overly complicated and online resources abound. HTML alone allows you to author structured content in a semantically correct way. CSS (with help from media queries) allows you to shape the visual hierarchy of content and adjust it to different contexts.
If you’re new to HTML and CSS, learn a little bit at a time –and fake what you can’t build. You don’t need to have a fully functional AJAX calls or form validation in order to gain insight. Stephen Hay suggests capturing and printing screenshots to show to stakeholders early in the prototyping process. This way you can show exactly the ideas you want to convey without risking stakeholders getting caught up in the fact that a button doesn’t work, or links aren’t yet connected to their destinations.
Finally, allow your process to grow and develop over time. It will. We may never strive –or want –to be standards-compliant, cross-browser, front-end rockstars, but with a little bit of knowledge, practice, and experience, HTML prototyping can become a valuable addition to our content strategy and information architecture toolkit.

The post Designing with Code appeared first on UX Booth.

June 04 2013


Design in Service: Crafting the Citizen Experience

Many agree that a combination of factors – a demand for better user experience, the rise of ubiquitous technologies and more readily accessible datasets – present the conditions necessary for a more enjoyable life as a citizen of our country. But necessity is just the mother of invention; it takes hard work to get there. To narrow the gap between today’s promises and tomorrow’s opportunities, designers are increasingly intent on improving what’s known as the citizen experience.

The trends aren’t difficult to see. Co-authors Joseph Pine and James Gilmore pointed out eons ago in the web world – back in 1998 – that we live an experience economy. Simply put, people are drawn to products and services that are more considerate of their experience. Additionally, by now, designers are well acquainted with the idea of mobile, ubiquitous computing. It’s hard not to be. It’s the subject of books, blogs, even whole conferences.

One consequence of these trends is data. Lots of it., a site created and maintained by the Obama administration’s Open Government Initiative, houses over 73,000 sets of the stuff. The sheer quantity available begs the question: what can designers do? The (short-term) answer is visualizations. With them, designers turn otherwise confusing arrays of numbers into useful information.

Map-based visualizations seem a relatively humble start, yet the examples appearing on sites such as and readily manifest the power of mere juxtaposition.

Visualizations are only a small part of the story, though. What’s more valuable than the insights created by way of visualizations and others information technologies like them are the storytelling opportunities that these neo-journalism tools afford. By piecing together the narratives behind collective action, locally-minded people – citizens – can tell more cohesive stories about their communities and plan for change. In essence, today’s technological landscape provides a compelling opportunity for designers to affect a positive change across entire municipalities.

The citizen experience

After years of working in the private sector, Jess McMullin had an epiphany. At two in the morning – the Saturday before Christmas, 2009 – he made the not-too-hasty decision to leave the consultancy he had founded six years prior. Jess left his own company to work in the public sector because, in his words:

I’ve found public-sector work to be infinitely more meaningful than private-sector work. I guess that’s because, as an individual, I actually have faith and confidence in the government as a solution to societal problems.

Individually, we tend not to act in a way that’s attuned to our collective needs. The free market led us to the housing crisis and situations like Enron. Unregulated, it’s a sociopath. Government provides a solution to the tragedy of the commons.

Jess Mcmullin

Many of the designers with whom I spoke while researching this piece had a similar epiphany: the “tragedy of the commons” becoming too acute, and projects focused on the citizen experience appearing refreshingly greenfield by comparison. It led user researcher Cyd Harrell to more prominently introduce the term to the community in her article on UX Magazine titled “The Citizen Experience Needs Us: Why UX practitioners should join the Government 2.0 movement.” She says:

Lately, I’ve started thinking that our view of the human as a “user” is incomplete. Yes, interacting with interfaces does come down to using technology, but just as “customer” is a more comprehensive term in the commercial realm, we need another term to describe other important relationships in people’s lives.

Anyone applying for a business license or a building permit, paying taxes, looking up public records, or requesting benefits is participating in an interaction where they are something more than a user. These relationships aren’t exactly voluntary the way commercial relationships are, but at the same time, the public nature of these services makes the user a co-owner in a way that customers typically are not.

Most citizen experiences don’t properly reflect this reality although they should, and it’s interesting to think about how they’d be different if they did.

Cyd Harrell

In other words, the citizen experience is a direct result of the platform provided by a municipality. While its opportunities aren’t as readily apparent, they’re no less important to would-be civic designers.

The civic design spectrum

The gap between today’s user-centered designers and tomorrow’s civic designers is closing, albeit slowly. That’s partially because citizen experience is a relatively nascent idea (to us), and partially because the resources available to designers are few and far between. It’s a bit of a chicken and egg scenario. Some resources do exist, though: Jess McMullin, mentioned above, wrote a guide called Getting into Government Consulting detailing his lessons from the trenches; researchers Nate Bolt and Tony Tulathimutte wrote an account of their work with Stanford University, helping get the word out about Swine Flu; and designers Elizabeth Buie & Dianne Murray co-edited a book called Usability in Government Systems, which acts as a good primer.

Dana Chisnell’s Field Guides to Ensuring Voter Intent were funded through Kickstarter and designed by Oxide Design Co.

Other designers have simply jumped in head first, making a name for themselves by taking part in what author Jon Kolko calls social entrepreneurship. Social entrepreneurship works just like its conventional counterpart except that social entrepreneurs seek to solve humanitarian problems rather than sell products. Dana Chisnell’s Field Guides to Ensuring Voter Intent and Laura Amico’s Homicide Watch serve as good examples, in addition to joint-ventures such as Random Hacks of Kindness (sponsored by Microsoft, Google, Yahoo!, NASA, and the World Bank).

What’s clear is that civic design projects run the gamut – some are visualizations, some are physical objects, and some are quasi-public services. Is there any consensus as to what citizens actually want from the government of the future? This summary, accompanying an Accenture study from 2012, suggests an answer:

The majority of people say they would use digital services if offered by government, especially for routine transactions. And over half want to conduct all their government business digitally in the future. The biggest challenge for government is not catching up with the private sector—it’s giving digital citizens what they want while using digital channels to improve public value.

Laying aside the ambiguity of “public value” for a moment, it seems sensible to conclude that the primary way to increase that value would be to give each citizen a voice, helping them take part in their own democracy. San Francisco’s online service center, @SF311, does just this.

As Cyd explains (in the same article mentioned earlier):

One day last summer, driving through Golden Gate Park on one of our notoriously freezing and foggy June mornings, I noticed sprinklers in full spray all along a major road, wasting large quantities of water. Having recently heard about the service, I tweeted @SF311, and within 45 minutes I had a helpful response assuring me that it would be checked out. The next day when I drove the same route, the sprinklers were off.

Cyd Harrell

Tools such as SF311 are equal parts fascinating and vexing. While one the one hand they liberate – empowering citizens – on the other hand they also represent of an entire class of products and services that are often unheard of until after they’re built.

Better government for everyone

Anyone who’s interacted with an office of their local government knows that the public sector works as best as it can to serve the needs of its constituents. Organizations frequently adopt and adapt solutions along the way which inevitably introduces inefficiencies. Inefficiency, however, is something for which user-centered design is well suited. It’s just rarely the case that these two parties meet in the middle, despite the fact that they have so much to gain from one another.

This disconnect prompted Jennifer Pahlka – a former game-industry leader turned social entrepreneur – to found a civic-design organization called Code for America. Code for America is best described by way of analogy, drawing comparisons to both Teach for America and Peace Core (but for geeks). At its heart, the organization facilitates is a year-long fellowship program, recruiting designers and developers to scope and solve public-sector problems in collaboration with local governments.

In a nutshell:

  1. Designers and developers apply from all over the country,
  2. Next, a handful are chosen to participate in the San Francisco-based program,
  3. Finally, states sponsor a group of fellows to come onsite and collaboratively solve government problems in a user-centered way.

Participation in the program is as much a learning opportunity as it is a gesture to shared future of our nation. The following video provides insight into one of the projects that came out of last year’s program:

Fellows from Code for America describe their latest collaboration with a city government, a website built for Honolulu’s City Hall.

Readers interested in transitioning into the the civic design space are highly encouraged to apply for the 2014 fellowship.

What tomorrow feels like

The most fascinating thing about citizen experience design is that it’s taken so long to come to the fore. The problem space begins with a question that’s pertinent to all of us: what’s it like to be a resident of a town or city? And how could that be better? Living somewhere is “an experience” most do not think of “choosing;” our parents made that decision for us. But as we grow up we do have a choice: do we keep things as they are or do we choose to make our future government better than we found it?

The post Design in Service: Crafting the Citizen Experience appeared first on UX Booth.

November 22 2011


Showcase Of Small But Useful Content Management Systems

There are lots of Content Management Systems on the internet and sometimes it might be difficult to choose one of them. Sure, WordPress is leading and Blogspot is following on the second place, but what if you want to have something else? If you are one of the ones who needs an advice, then this article should be perfect for you. Today we take a look at popular CMS all over the web and describe them so that you know which one fits you best. Although I could write about them, I would rather skip WordPress, Joomla, Drupal and Blogspot, because everybody knows about them and I do not think they need descriptions.

1. Expression Engine

Expression Engine is one of those CMS that is easy to use. Within few minutes of testing it, you will already know the basic functions and will be able to play with them right away. This CMS is very flexible and creating content should be much more than easy. The templating system shows you immediately the changes you make and the last-generation caching system minimizes the database usage, which means faster loading times not only for you, but also for your visitors. Another advantage Expression Engine offers is the option to embed and run PHP directly in the templates, similar to the widgets from WordPress.

Expression Engine allows you to have multiple sites with just one installation. The caching system I was telling you about earlier keeps the site running fast because it stores database queries in the memory and reduces the database connections when web pages are generated. The license has to be paid only once and ranges from $99 for the “Freelancer” pack to $299 for the largest pack.

2. Business Catalyst

Business Catalyst is an Adobe product considered to be very powerful for developers. Basically it is also for content publishing, but has many other features such as e-mail marketing and site analytics. The analytics are maybe one of the most interesting features, thanks to the depth of the information the user gets, such as customer’s actions. The CMS lets you build and manage a customer database (which is feature most of the other CMS lack) and allows you to sell your products online. Unlike many other CMS, Business Catalyst can easily be integrated with PayPal, Google Checkout and other pre-integrated payment gateways.

The main difference between Adobe’s CMS and other ones is that Business Catalyst focuses much more on online businesses than on blogs. If you want to have a blog, then Business Catalyst is not the way to go. However, if you have products you want to sell, you can skip a lot of coding and stress by going with this option, because it is probably the best one out there. You can create a custom HTML/CSS layout, upload it and then integrate the available modules into it  - it can’t be easier. Adobe offers five types of monthly licenses for Business Catalyst, ranged between $9 and $79.

3. Cushy CMS

For Cushy CMS you don’t have to pay anything, because it comes free of charge. You can, however, go pro for $28 per month, but you have pretty much what you need if you are a beginner in the free version. Cushy is very similar to WordPress in this matter. If you go for the free version you have only very basic features available and will not be able to upload your own logo, change colors, use your domain name, customize the themes and others.

The main advantage of Cushy is that is simple and you do not require PHP, or any other programming language to use it. Cushy produces as well standards compliant, search engine friendly content. Another advantage is that the server space is unlimited even with the free version.

4. Contao

Formerly known as TYPOlight, Contao changed its name in June 2010 and is an accessible open source CMS that enhances functionality. There is no CMS in the world that can compare itself with WordPress in terms of plugins and extensions, but Contao does its best efforts with a large database of useful plugins available for everybody. There are hundreds of additional modules which are easy to install and customize and there are also lots of templates available.

The downside of Contao are exactly the custom templates which have to be bought and for which you might need to know some CSS, because they definitely need to be customized to fit your needs. The templates are not great and if you look to create a visual impact but don’t have design and coding knowledge, Contao might not be the best choice.

5. Radiant CMS

Radiant CMS is based on Ruby on Rails and has a very active community for support and updates. Radiant focuses on making everything user-friendly for everybody and offers flexible templates which can be customized right after installation. Radiant features a very good and flexible site structure, custom text filters and page caching. It is not full of plugins and modules, but it gets the job done. Moreover, the CMS is free of charge.

6. SilverStripe

SilverStripe is another open-source application written with the use of PHP. It has many configurable options and targets websites with a lot of content, because it is very easy to manage it. Built on the Saphire framework, SilverStripe offers very good SEO support and allows users to customize the administration area too, which is quite rare nowadays.

The downside of SilverStripe are the default layouts, which are pure basic templates, but as long as you know some design, customizing them should not be a problem. You might also find some custom templates on the internet and spare some time designing yourself.

7. Textpattern CMS

Textpattern is a relatively popular Content Management System due to its simplicity. It provides great tools and allows users to create content very easy, quick and according to web standards-compliant pages. There is not a WYSIWYG editor included, because the CMS uses textile markup for content generation, which means text is automatically generated into HTML (this option is available in WordPress as well, so you should be used to it). The administration panel is very easy to use and follow.

Textpattern comes free of charge as well and allows many things such as layout editing, file and image upload, plugin installation, SEO tools, subscribing features and a big support team which continuously improves the platform.

8. Alfresco

Alfresco is very easy to install and lets you convert files into documents. Alfresco might be a bit more difficult to get used to, but if you put some time into it, in the end it will pay off. Alfresco is not that much for beginner bloggers, but targets developers much more. Don’t get me wrong, this CMS is very flexible and usable and the administration panel is organized, maintained and easy to navigate through, it just takes a bit more time to get used to it. Alfresco is an open-source product as well.

Tips on choosing the perfect CMS for you

After reviewing these CMS, you probably have a difficult choice in choosing one of them, therefore I thought of sharing some tips with you very fast. First time you have to think what your needs are. If you are business oriented and want to sell something, Adobe Business Catalyst is probably the only choice, although it might be a bit pricey. The rest of the CMSs reviewed here are for bloggers, although Expression Engine might be a bit too expensive, so try to avoid it if you only do this for passion and don’t plan on getting serious with it.

You also have to think how intuitive and easy to use the system is and how good the GUI interface looks. If the administration panel is difficult to use, then why should you choose that one? In the end, the administration panel is the place where you will spend 95% of your time.

Think also if the CMS is flexible enough and allows you to use plugins or modules. And make a short research before choosing one of them and see if the available plugins and modules are enough for you. If the CMS is not extensible, I personally don’t consider it worthy to be chosen.

In case you are a developer, this tip might not be for you, but if you are a blogger only, or maybe a front-end designer, would you feel comfortable to have to edit or PHP pages/modules? If not, then choose a CMS that doesn’t force you to do this. If it is too complex it might not be for you.

Other important thing you should consider is the security. I am aware of the fact that the largest CMS in the World, WordPress, has security issues all the time, but at least they try to work on them. There is no perfect CMS if we take a look at their security, but hey, this is the internet today, there is not that much you can do. However, it is a good to make a bit of research and see which CMS is the most secure.

Find out if the system is optimized for speed and performance, like Expression Engine is, and then look into the documentation and support. At some point in time you might need some help and it is important to have a place where you know you can find answers.

With this last tip I put an end to this article. I hope all the small, but very good and interesting CMS I’ve reviewed today look interesting to you and I hope this article helps you a bit in the process of choosing your next Content Management System.


Earlier today Salman talked about Pligg, a Social Networking CMS for people who want to create a website like Digg and Reddit. Also included are 20 examples of how Pligg is used. Be sure to check it!

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
Get rid of the ads (sfw)

Don't be the product, buy the product!