The Next Big Thing: Content Driven Prototyping

Building interactive prototypes is increasingly becoming a standard in today’s UX practice. This is an awesome development and designers should be encouraged to evolve from thinking about interaction design to actually producing it for their prototypes.

A very sensible approach to interactive prototypes for the (mobile-) web is building them using HTML/CSS/JS. After all this is what the web is made of (apart of cat-content of course). During the last 2 years I have been building a prototyping tool for designers that allows building prototypes that scale fast. The tool is called Protostrap and I already wrote a post about its awesome glory.

Content is Key

One thing that I found not so glorious about Protostrap – and all the rest of the prototyping tools for that matter – is that almost all content is hardcoded into the templates. This means that a lot of content is used  multiple times in different places on the site. If any changes have to happen to some specific content this has to be changed on every occurrence. Not so cool.

Changing the approach to prototyping

Much cooler would be to gather content in one place to make it easy to correct and edit the content. A COPE of prototyping so to speak. The benefit of collecting the data in one place is not only easy correction and extension. The immense advantage is that designers have a direct benefit of thinking about actual content right at the start of the project. This helps see the connections between the elements of the site and should reflect the content object model you that is  going to be used on the site.

I expect that content driven prototyping will emerge as a result of the complexity we are faced as designers that have to deal with adaptive content and the delivery to multiple devices.

Pimp my Protostrap

As a Content Strategist I fully embrace a Content-First approach and therefore I decided to bring Protostrap to the next level adding some sort of data-layer. The challenge was to keep it really simple while still having a lot of flexibility. A Database? Easy to add to Protostrap but too complex to use. An Excel File? Easy to use but Too hard to get it right on Protostrap’s side.
The solution I went for is adding a file data.php that contains content in the YAML format.*

The way YAML works is that data is structured solely with “Key: Value” pairs and indents are used for hierarchy.

A simple YAML file looks like:

name: Freddy
age: 34
    street: 4 Canterbury Road
    city: Colchester

This is a very human readable format that should not be too hard to come to terms with.

Each first level key is exposed as a variable in Protostrap. This means that in the example above the designers have the variables $name, $age, $address at disposition.

Bildschirmfoto 2013-06-05 um 16.46.26

The Events example looks like this in the template:

 <table class="table table-blank">
    <% foreach($events as $event){ &>
            <td><%= $event['date'] ;%></td>
                <strong><%= $event['title']; %></strong><br>
                <%= $event['subtitle']; %>
    <% } %>

* YAML is also the way that the much more complex prototyping tool Prontotype handles data.

Get Protostrap – a Prototyping Framework for Designers

As of today a brandnew release of Protostrap is available. Protostrap is a prototyping framework for designers that want to get clickable and testable Prototypes up and running fast. This post is about the whys and basic hows of Protostrap.

Continue reading Get Protostrap – a Prototyping Framework for Designers

Device Proficiency

A while back Jared M. Spool made a much noticed observation in an interesting post regarding designers who can code .

It’s clear from our research that designers who can code bring more to the team and, in the long run, see more of their brilliant work making it through the development process, to the user.

The topic is still hot and dividing the designer community in a tabs vs. spaces way (if you don’t get that reference you are a non-programming designer).

Having programming skills as a designer will most certainly work in your favor both on the market place as well as on the job. The crucial thing though might not be having programming skills as such but something I call device proficiency.

Continue reading Device Proficiency

Shaping the Future: The UX of Near Field Communication

NOTE: This is the draft of my entry for a lightning talk at UX Lisbon 2013. Let me know what you  think of it.

The information age took us by storm and the mobile revolution is still in full effect – yet we already stand on the brink of the next paradigm shift: the seamless connection of information and personal devices.

Much of this involves a technology called Near Field Communication, NFC in short. NFC is based on paper-thin adhesive chips that can hold tiny bits of information. These can be stuck wherever their use is appropriate and read by NFC devices, mobile Phones being one important part of them. More and more mobile phones come with the capability to read and also write NFC chips.

NFC is usually only mentioned in connection with payment systems. Its range of possible use though is breathtaking and sadly too often neglected.

This talk offers a brief introduction to the principle of how NFC works and focuses on the amazing possibilities of NFC in everyday use and how NFC can enrich our experiences with technology by showing actual and (once) futuristic use cases and how this relates to our profession of User Experience Design.