Designing with details [#isa2012]

Today’s post it’s about microinteractions and the importance of the details. Last week we had a conference about interaction design (#ISA2012) in São Paulo and I decided to make separated posts about the talks.
Microinteractions are the way we experience detailed events. So, when we try to approach a design process with attention to details, we are talking about creating microinteractions. Thus, while trying to solve massive problems through design tools, the details are often lost during the process. We should work by the bottom up system, giving more attention to small things. This is the theme of Dan Saffer’s new book, “Microinteractions“.

Do one task well
Improving the microinteractions is creating engagement. This means that we should attempt to small details. “The details are not the details. They make the design” – Charles Eames. So, details must be seen as special parts of one big project.
Besides, it’s better to manage and control the work, when we are building a fragmented and complex scenario. For example, creating a small form, or the feedback from translation words on Facebook.

Transform moments into instances of pleasure
Microinteractions are good for accomplish a single task. We can interact with a small piece of data and get the maximum of feedback from it or even create a small part of content that is totally relevant.

Do not overlook microinteractions
If the interaction is poor, the features get surrounded by pain and frustration.
While designing, we must consider the big picture and details to improve the user experience.

Small interactions fit well on small devices. Dan Saffer says that while designing microinteractions we can adapt the features to each device, allowing consistency.

Previewing actions
With the attention to details and micro interactions we can try to preview actions. This happens when we focus in loops and modes, by the tripod made of trigger, rules and feedback. It’s about bringing the data forward and understanding the user needs.
A good feedback can transform they way we learn the rules and the loops.

I think that maybe with established microinteractions, we can try to create interaction patterns. So while designing a product, we can see which small interactions are concrete. It’s like going to the library and follow a guideline. Perhaps with an accurate pattern, we can develop tools for a better experience. If the big picture can be created by microinteractions and detailed experiences, we can try to approach to human interactions.

Designing for Interaction
Changing Perspective: A New Look At Old Problems
Touching the desktop – Modern micro-interaction and burdens of the past
Interfaces on the go

photo credit: four points via photopin (license)

Creating meaningful interactions through games [#isa2012]

Yesterday, I posted about Prototyping experiences. Last week we had a conference about interaction design(#ISA2012) in São Paulo and I decided to make separated posts about the talks.

During the third talk of the day, Olli Leno, explained why the future of games is emotional and how we can relate experiences and cognition.


Meaningful playability

We create meaning from the quest for more emotional computer games, transforming games into playable artifacts. Olli Leno says that emotions define the way we relate to experiences, that’s why it’s important to design meaningful and emotional playability.
The future of games is emotional, not technological. Games are in pre-Citizen-Kane Era. They need to be reinvented in terms of content and address some issues from the real world. You need to feel the game as you are feeling the real world.

Playing is believing
Play is a primal mental action and emotions are judgments and interpretations of the world. The more we care, stronger is the emotion. This is known as a relative intensity.
The origins of the emotions in play is the interpretation of the game. The system’s content is the object of emotion.

Engagement and context

Caring about is a necessary condition for emotional judgment. So, why do players care? They do it because of threats of violence, rules, goals, challenges… Therefore if the challenge is right, the game is fun.
Games can also transform the context and its artifacts. Playable tools and elements can be meaningful if we create playable forms from this context. For example: a pinball machine it’s a game that became material.

Game-rules x rules
The players can get a positive description of the game behavior or rules that they need to incorporate. We are responsible for the freedom we enjoy and choose.

The possibility of failure makes playability
The GAME OVER meaning is that, you can fail in your quest. What makes Tetris playable? That you can lose. Failure is about significance. It provides a baseline for caring about in-game objects.
The Sims, for example, is a sandbox and it has no pre-defined goals but lots of opportunities to fail (like setting fire into the kitchen and letting your Sims to die)

But how to create caring?
Players need to survive in the game world. This creates a fear of failure that moves the game forward and gives an emotional commitment to the scenario.
The context became material and meaningful, so the players don’t want to lose the game, because it’s important to them to maintain this relationship.

Interaction through meaning
So when we create emotions through games, it’s possible to understand and offer more experiences for the players through meaningful choices. In order to create a complete interaction, we need to consider the logic of caring, emotional cognition and feedback.

On simulation, aesthetics and play: Artifactual Playground
Bringing emotions to video games
What is Love?
Social psychology
Emotions about the Deniable/Undeniable: Sketch for a Classification of Game Content as Experienced

photo credit: Art of Video Games Exhibit 15104 via photopin (license)

Prototyping experiences [#isa2012]

In the last post, I talked about Arduino and my impressions. The posts of this week will be about the Interaction South America, a big event that happened a week a go in São Paulo. Hope you like them! :)

The second talk of the day was conducted by Martin Zabaleta, partner and director of Insitum. He started talking about sketching user experiences, where prototyping and design are essential part of the process of innovation. This means that to create a user-centered approach, we need to think about people and prototypes.

“The only important thing about design is how it relates to people”

This is a quote from Victor Papanek, a designer and educator that defended responsible design. The relationship between design, social and environment can’t be ignored. “Design must be meaningful”. Meaning is the deepest and strong connection between people, context and expressions. That’s why experiences must be meaningful.

Innovation begins with an eye

Observation is learning from people’s needs. We need to understand how the social cultural scenario configures and then create a relationship between cognitive emotions and physical reactions. Observe extreme users, not the average people.

Quick, dirty and cheap
Prototypes must create a tangible and physical representation of an idea. You must learn its aspects and reactions.
Experimentation, risk-taking, learning, failing and fearlessness, must be your guides. The prototype doesn’t need to be too much planned: you need to build, learn, refine and build again. Fidelity can appear in different levels, depending on what you are trying to achieve. You can prototype services, strategies, business models, interfaces and interactions.

In order to describe relationships between services components we need to think about a conceptual prototype. For this, we develop a scenario (or multiple scenarios), that we can illustrate the experience and create empathy. We can prototype the user journey through the entire service.
Also in that context, trust can be built through design. The experiences created by tangible elements and prototypes. We need to design for people’s needs and factors that matter to people.

Approach a problem solving
It’s important to have empathy for the context and creativity in the generation of thoughts. In that scenario, design thinking should be the key. We need intuitive and analytical thinking.

So, can we design a better way to educate?
It’s possible to improve education in Latin America. We can create a better network computer, applications to learn math, an ecosystem or the method of teaching. Everything is related to the experience between students, teachers, parents and the society. The good thing about prototyping education is to build experiences that are related to the context and culture. Building an experience in Brazil is totally different from Singapore, China… Or even the experience in the same country can be diverse. It’s important to prototype to learn fast and build good and coherent experiences inside one culture/context.

This post was a brief introduction about prototyping experiences. Martin Zabaleta also gave a workshop in the first day of the #ISA2012.
*Images from Facebook/Corbis

Teaching Kids Design Thinking, So They Can Solve The World’s Biggest Problems
Designing to Build Trust : The factors that matter
Agile Problems, UX Solutions, Part 1: The Big Picture and Prototyping
Co-designing with Children
Design For The Real World: Human Ecology and Social Change
An Early Champion of Good Sense
Iterating for Visitors at the Exploratorium

photo credit: e350 paper prototype via photopin (license)

Arduino and prototypes – designing interactions [#isa2012]

A week ago we hosted in São Paulo a big event of interaction design. We had great people talking, like Massino Banzi, Martin Zabaleta, Olli Leino, Roger Pujol, Dan Saffer, Jonathan Hull and… Don Norman. Well, I decided to write a post about my impressions of the Interaction South America (#ISA 2012), but this post became so big that I decided to make it in parts. So this week you will have content to read every day. :)

Why prototype with Arduino?
Arduino is a small tool for computers to control the physical world, through open-source platforms. Massino Banzi opened the first day of the #ISA2012 talking about prototyping with Arduino and the possibilities to build interactive electronics projects.

Collaborative technology
In order to make Arduino we need a piece of hardware, software, process and communication. All the contribution of new tools (Arduino has some derivatives too) and new experiments goes to a ‘community’ that uses and shares everything. This is possible because Arduino works in an open-source platform. So, it shows that we are living a democratic place in technology, where you can share things and experiment the world. Exemples: GitHub that promotes collaborative coding and CERN OpenLab from LHC project.
So, things made with Arduino are a mashup of tools and elements and the documentation is creative common license. The only thing that is ‘protected’ is the brand.
Making collaborative things shows that we are transforming technology on our time. We are sharing knowledge and testing new things very fast. That’s why Arduino seems to be the right tool in the moment to build and improve new possibilities through prototype. We are now creating more interactions. Quick-and-dirty.

Internet of things
The planet, human and physical objects are connected and we can have access to all the data we are sharing through interaction. Devices are linked together using networks. Those networks can happen through internet.
So we can say that today we are living in the internet of things, which means that things (devices included) are connected together everywhere, through the cloud and related by data. Well, we are always transmitting data that can be transformed and storaged in the cloud. This cloud is not a place, but it is anywhere. We don’t see, but it’s here.
But let’s talk about things. So, things = things made with Arduino? That’s the key of what I’m talking here.
Arduino can help us to create things that talk to each other and use the data we transmit. Transforming data is transforming new forms of social relations and we can do this by our own hands.

3D printers and prototype
Prototyping is creating an early sample of a thing that we want to test in a specific context and get some feedback from it. Well, we have more examples of prototyping and transformation. The 3D printers are already a reality. You can imagine, create something in your computer as a prototype, print, test and see if it works. A new industrial revolution?

Creating possibilities
Experience can be promoted by a bunch of interactions. We can transform the virtual/fantasy into something real and tangible. Imagine the Clock in Harry Potter, for example, alive:

We can add another function to clothes:

Ruffletron – demo from lara grant on Vimeo.

And… Use Arduino in the Large Hadron Collider at CERN:

The possibilities seem to be huge in this scenario and everything is promoted by new ways of interaction. The role of the designer today is bigger than we can imagine.
Now the designer has the autonomy to create and prototype. It’s like a DIY technology, exploring the world through new materials. You can make whatever you want in single prototypes. Interaction appears everywhere.
That can help us to think out of the box. We need to image that things can happen out of our comfort zone, where plants can talk and tweet.

It’s a mixture of things, experiments, here and now. Break your paradigms!

One observation: I didn’t have the opportunity to create any Arduino prototype yet. Hope to build it soon and then I will post my experiences here. :)

Open-source your projects — and upload them to space: Massimo Banzi at TEDGlobal 2012
The Internet of Things: how it’ll revolutionise your devices
Medical and Health Related Projects with Arduino

photo credit: rometer via photopin (license)

How to design a responsive framework for newspaper content [case study]

For the first time in my work, I had the opportunity participate of a responsive design project, with an amazing team, building a framework. So, this post is about the challenges of this project and the process. Before reading this article, I invite you to check out the app :) Write in your browser from your mobile device or tablet and have fun!

The briefing
It seemed to be a short briefing in the beginning, but it was bigger than we thought. The client is a newspaper in Rio de Janeiro: Jornal OGLOBO. I work for this company since 2011 and this was a big challenge for me, as an interface designer.

As you can see, that’s a big website with massive content. The newspaper asked us to build a framework, that could be used for different topics like elections, carnival, festivals, etc. For this project, we started with this year elections. Basically, this web app should be a feed of news, filtered by this topic, but with special features and optimized for different devices.

Why choosing a web app?
It took some time to understand why they wanted a web app and not just make some list in the mobile website. Why choosing a web app if it will work as a list? Mobile devices are designed for special tasks. The reason why you use a tablet or mobile will depend on your context.

In our scenario, we are working with a website that has a massive content. So, it should adapt to any device and bring flexibility for all users devices.

We must also considerate, that the web app should look as a native app, according to mobile patterns, because we are using the same device.

Good points

We can build a quick comparison between native app and web apps, but the choice will depend on the business objective, target audience and strategy.

It’s all about the context
“First the devices implies a context”. When you design for different devices you can’t know all the user’s context. So that explains what kind of content are you going to emphasize. If it is a mobile user, he/she must want to know more about the new numbers of the elections rather than the news, for example, because he/she won’t have time to read a big article about it or just understand a massive graphic. The information should appear simply and directly. That doesn’t mean that mobile users don’t want to access all the information of the desktop.

Mobile first
Mobile web growth has outpaced desktop web growth, that means that this is a good opportunity of innovation and to focus in what the user really needs.
Web organization, actions, input and layout should bring curated and focused content for every device. This amazing design philosophy, built by Luke Wroblewski, suggests that we need to focus in the simplicity and relevant experience of content in mobile. We need to strip down to the essentials. Less is more. Always. Offering too many choices for the users tend to create confusion and the user won’t make a choice at all.

Different devices areas

Responsive Design
The challenge is delivering fluid content to each screen size. That means that we need to create a consistent and connected GRID to each device.

Devices OS Portrait Landscape
iPhone iOS 320 480
iPod Touch iOS 320 480
iPad iOS 768 1024
SonyEricsson LT15i Xperia Arc Android 480 854
Samsung GT-I9100 Galaxy S II Android 480 800
Samsung GT-I9000B Galaxy S Vibrant Android 480 800
Samsung Galaxy Tab P1000 Android 600 1024
Samsung GT-N7000 Galaxy Note Android 800 1280
RIM BlackBerry 9300 Curve 3G Blackberry 320 240

Table 1. – List of devices

This means that we need to work with a responsive design workflow, using structure, content, typography, mood boards, UI pattern library, asset management, native considerations.

The magic tool for this task and all the layout was Adobe Fireworks. You can ask me why, but I prefer to answer in another post!
White space is about exploration, so the wireframes were built based on responsive design patterns.

  • Footer anchor
  • Fluid images
  • Image GRID
  • GRID blocks
  • Lists
  • 3-up carousel
  • Fluid video

Elements change size and position in each device

That’s not only about visual. “Interfaces exist to enable interaction.” How do you envision this photo gallery in a touch interface? What about the different experiences between tablet / mobile / desktop?
If it is a mobile, scrolling can be the main interactive way to get the information. If it is an iPad, the experience can be more about swiping the pages and not having too much scroll. That was an important point in our project. The tasks are different, so we need to plan how the user will interact with the interface.

The size of the text should bring hierarchy. That means that the most important article must have a bigger type. Of course, the behaviour of the font-size in each device and different orientations should be different, but maintaining the same proportion. We should also verify behaviour of the blocks of type in the devices.

As the same in the typography problem, the images should be fluid. And in our scenario, the images must have the same size of the crops in the web site, to avoid ‘cutting the head’ of someone in a photo.

Colors and texture
The color palette should follow the identity of the main website. We decided to use textures in the background of our layout to create a comfort for the user while reading a massive text and also because this is part of the identity of the OGLOBO website.

Navigation header

Again, it should be fluid. I had some difficulties while designing it:

  • Behaviour of the header in different devices

In this project we don’t have a menu, but some other elements like: time, date, logo and name of the special topic. [we had to take out the time, because it was a problem: some users thought they were reading an old content, instead of the updated one]

  • The challenge of the ‘add to home screen’ button

One question in this project is the bookmark button, that will save the link in the desktop of the user. We designed this for androids and iPhones, but they have different elements that represent this action. In androids (not all of them) it is a star (bookmark), and this action has a different behaviour. DIFFICULT. The icon of SHARE is descendant from Safari. So, should we delete it when the user is accessing from a different browser? Or create another one?

Mobile patterns
We had to work with some primary and secondary navigation patterns and invitation patterns, like tip/discoverable window.
This is very important because the user is not conversant with the action of saving the shortcut in the home screen. That’s why we created the icon on the top.

Hummm Icon mismatch? Anti-pattern?

Well, we already know that using a familiar icon in an unfamiliar way will cause confusion.
Offering a standard icon would make this application more intuitive, and probably result in higher adoption of the “favorite”. But, again, this is a web app and not a native app. [we decided to take out the bookmark and use the tip before the user navigates in the web app.]

Navigation ‘sandwich’
In the content page, we forgot to bring it more like an app. I had a feedback that I won’t forget and I made the changes in the layout:

Collaborative team work
We worked in system of collaboration between developers and designers, trying to get the best result of the project. The good thing about this kind of work is sharing experiences and knowledge, like the viability of the framework and its particularities. The developers could give recommendations of how the project should adapt to each device.

Testing with different devices
While testing in different devices we needed to revise our design. In iPad some fonts were very small for readability.

Small feedback and tests
The team was small, but even with this we got some feedback from other amazing designers, that helped in some changes that I’ve made in the layout.
We had also some feedback while testing in the devices. The layout is not always the same as you see in the screen of your computer: you must test every detail. We discovered, for example, that we needed to fix the size of the typography. Sometimes you can’t use only proportional font-sizes, because the behaviour is different.

Review, design, build and repeat. That’s what we do. And of course, we need to keep it simple. We are still working in the perfection of this framework and I’m sure we will be working on it everyday. We must ensure a progressive enhancement always. I think everything is very new, including the technology that is changing everyday. This means that there aren’t right or wrong answers, but patterns of experiences and behaviours that must be respected first.

Boston Globe case
Separate mobile – presidential smackdown
A informação ubíqua
Making BBC One’s website responsive
Could A Redesign Really Rescue USA Today?

» Read this post in portuguese: Desafios da criação de um framework para notícias

photo credit: via photopin (license)