Emotional Interface Design: The Gateway to Passionate Users

We’re changing. Our relationships online and in real life are shifting as we become more public with our private lives. Online social networks have helped our real world social networks transcend time and space making it easy (and seemingly essential) to share the triumphs, tragedies, and trite moments of life. No matter how you feel about the appropriateness of over sharing, the shift towards a public private life is changing our expectations of the relationships we create online. Figure 1: Kenny Meyers uses humor in his portfolio to connect with his audience. Oh how times have changed (figure 1). Usable = Edible We’ve spent the last decade-plus striving to create usable web interfaces. When we go out to dinner at a fancy restaurant, we’re hoping for more than just an edible meal. Why do we settle for usable when we can have usable and pleasurable (figure 2 and 3)? Figure 2: Basecamp is usable Figure 3: Wufoo is usable and pleasurable Hello, Maslow Figure 4: Maslow’s Hierarchy of Needs.

10 petits conseils pour le Responsive Web Design ! Aujourd’hui, rendre son site internet utilisable à tous ses utilisateurs ressemble parfois à un challenge ! En effet, on trouve tout type d’utilisateurs qui navigueront : sur Chromesur FirefoxSur Internet Explorersur Safarietc.Mais aussi :sur iPhonesur iPhone 5 (pas la même taille)sur Androidsur BlackBerrysur Windows Phoneetc.Mais aussi :sur iPadsur Galaxy tabsur Galaxy Notesur iPad Minisur les tablettes Archossur Kindle FireMais aussi :sur la télévisionsur le frigo connectésur l’Amstrad CPC de mamie zinzin. De nombreux outils, de nombreux supports et des tailles qui ne cessent de changer ! Aujourd’hui, ce sont dix conseils pour le Responsive Web Design que l’agence Splio nous propose : source | source

What Is Your Mental Model? Rosenfeld Media has just released Indi Young’s Mental Models: Aligning Design Strategy With Human Behavior. Boxes and Arrows sits down with Indi to talk about: * The origins and evolution of the mental model * How the mental model is a way of visualizing nearly any research data * What shortcuts you can use to get started on a mental model with minimal time investment * Why “combing” an interview is like riding a bicycle * How Webvan failed because it ignore the mental model of its customers If you’re unfamiliar with Indi’s mental model diagrams, download the excerpt(.pdf), check out the “book’s description”: for more information on the method, or visit “this Flickr set”: for images from the book. Mental Models: Origins & Evolution Boxes & Arrows: Our readers would benefit from the story behind the Mental Model. Can you tell us how you created it? Excerpt

Media Queries Code-Free Mobile App Prototyping « adjustafresh – user experience design | digital marketing strategy 7 Feb, 2012 There’s a lot of talk recently in the design community about the utility and value of clickable mockups & prototypes. I agree that they can be very effective tools for a number of reasons—primarily the ability to clearly communicate user flow and proposed functionality to stakeholders on the business, design, and engineering teams. Prototyping is especially valuable when designing mobile experiences, allowing users to experience the prototype on a tablet or smartphone. They’re extremely useful for early & ongoing usability testing of design concepts prior to moving into code (in most cases, things get more expensive to change once programming comes into play). Here’s a (mostly) quick & dirty way to transform your ideas into clickable prototype goodness without any code. Keynotopia To The Rescue While designing a native mobile application recently for a large insurance client I used PowerPoint templates designed by Keynotopia to give me a jump-start on the wireframing process.

Beyond Media Queries: Anatomy of an Adaptive Web Design I had the fantastic opportunity to speak at An Event Apart Washington DC. Here’s the gist of the talk: Generic trademarks begin their lives defining a specific product or brand, but over time those original meanings erode and they become the generic terms to describe a general product category or actionThe web world is used to these generic terms as well. HTML5 and AJAX before it have come to define all that is new and shiny on the web. The Principles of Adaptive Design What beyond layout do we need to concern ourselves with when crafting multi-device web experiences? Ubiquity The power of the web is its ubiquity. Flexibility Embrace the inherit fluidity of the web.Continue creating flexible interfaces that can adapt to any screen sizeToday’s common breakpoints aren’t tomorrow’s. Performance Enhancement Responsive web design does not equal “one sized fits all”. Future Friendly The key aspect of Future Friendly thinking is to acknowledge and embrace unpredictability. That’s about it.

Focus On: Design Trends in Mobile Apps for iOS Apple’s mobile operating system has gained a huge following in just a few short years. Although it can take months of dedicated study to even begin programming iOS apps, there still seems to be a solid market of intelligent developers. In the last year alone we’ve witnessed the iPad2 and iPhone 4S releases which have both appeared stunning. And along with these advances in technology comes a much larger demand for iOS apps. I’d like to go into a few design trends which have become prevalent in mainstream iOS interfaces. Designers have started following innovative and whimsical methods for constructing beautiful app layouts. Offset Center Tab Button Surprisingly I have run into this feature a lot more in the social network-type applications. The benefit of this tactic from a metrics perspective is that you’ll see a lot more active sharing using that center button. Another cool example can be found in Tumblr’s iOS app. Popup Modal Views Link Icons User Profile Badges Custom Loading Animation

Le responsive web design : la réponse à tous vos problèmes ? Avec la multiplication des écrans et l’accroissement du nombre de mobinautes, il est désormais quasi indispensable de proposer une version mobile de votre site web. Vous rendre accessible n’importe où, n’importe quand et depuis n’importe quel appareil facilite la vie de « vos » internautes chéris. Si développer une application mobile peut être une option, concevoir un site web en responsive design apparait aussi comme l’une des solutions des plus tendance. En substance, opter pour l’un ou l’autre revient à faire des choix tant en terme de contenu que de conception graphique. Le responsive design sous toutes les coutures D’après notre ami Wikipédia, le responsive web design « regroupe différents principes et technologies qui forment une approche de conception de sites Web dans laquelle un site est conçu pour offrir au visiteur une expérience de consultation optimale facilitant la lecture et la navigation. » Le site du Groupe Istya en Responsive Design Des avantages… Que faire finalement ?