The rise of Dynamic design

The adoption of CSS3, trends like Flat Design and the release of newer mobile OSs are pushing designers to work more frequently with moving elements. One-page parallax scrolling sites, image blurring effects, shape morphing and a lot of other dynamic effects are more and more present in the standard designer’s toolbox. This isn’t just a designers fad to put some more fanciness in their work. Neither a new design trend. Animation and movements are instead deeply tied to human psychology: these are things to which we tend to react naturally. Designers use them to add the “emotional” touch to their work and connect to the user, but also to provide real added value for the experience. There are countless articles showing the importance of animation from a pure usability point of view. So, it’s clear how the value of static compositions is declining: thus it will be more and more important to build and communicate the dynamic nature of design we want to achieve. How can we do it? [youtube_sc url=https://www.youtube.com/watch?v=MyIE9vjy8Zo]

Filling the gaps

You’re designing a new eCommerce website: you made the sketches on paper, the wireframes and site maps with Axure, you added some rough interactivity, you did the pixel-perfect graphic design in Sketch. Now, you have in mind this beautiful slide transition with easing to switch products in the listing. Static deliverables illustrate the layout and detailed visual appearance of the page. Interactive prototypes can fulfill the (basic) needs of interaction design. What do we have in our toolbox to define the detailed dynamic aspects of the design i.e. animations, transitions and effects? There is no industry standard and this is mostly why we’re still struggling with this issue today. In the next chapter I will try to analyze some of the options that are available out there: obviously each one has it pros and cons and it’s suited for different needs. [NOTE: In this article I will use the terms animation and transition as they are the same thing, even if they hold slightly different meanings, at least in CSS3 specifications]

Mockups sequence

Taking from classical animation techniques, the easiest way to document dynamic design is to produce several mockups of the animated element showing a few discrete stages of the transition and annotating them if needed (with information about timing and easing, for example). It will be then up to who “reads” the mockups to interpret and interpolate the in-between. This works with really simple animations and may demand a lot of annotation to be effective. On the contrary, it cannot detail fine-tuned transitions and does not communicate well the very dynamic nature of what we want to create.

GIFs

A GIF is no more than a sequence of static images that are shown one after the other in loop to create a sense of animation. It’s a good solution that works in simple cases where no complex interactivity is needed. They can be easily created with programs we already use like Photoshop or Fireworks: in the latter you have the useful tweening option that lets you automatically create the interpolated images for the animation. They’re pretty good for documentation and they are easy to share on the web, since they can be seamlessly embedded in HTML pages. The main problem of this approach is that you can’t interact with a GIF, making it quite rigid (it shows only the intended sequence). Moreover, it could be demanding to create in case of long or complex animations.

States in Fireworks can be used as frames in animation. You can specify the Frame rate and use techniques like Onion skinning

Flash, After Effects (Animation programs)

Flash and other tools like AfterEffects have been for long time the natural choice for any designer willing to illustrate interface animations, because, well, they’re animation programs. They’re a pretty powerful solution that can cover most cases we may encounter and that can go to the finest level of detail. What is the issue? Well, these programs often have a steep learning curve (and some of them are being dropped, like Flash) and it may take a lot of time to produce what we need. Not all designers have these tools in their skill-set. Moreover, simulating real user interaction is not possible since the animation cannot react to user actions. Anyway, if you can use AfterEffects, you will be probably able to design any animation you may want.

HTML prototype

Live web code can be used to show how an interface should behave and react to user actions in an high-fidelity fashion. Indeed, if you’re not designing a native app, HTML prototypes are the closest artifact we could produce to document a web interaction. They can be created either by manually writing HTML/CSS/JS code or by using a WYSIWYG editor. The market for newer, responsive-friendly, web design applications is growing day by day: they let you create interfaces in a drag-n-drop fashion and then generate  semantic code that can be further manipulated. Examples include Macaw, Adobe Edge Reflow and Webflow. Not all interactions can be created with such a tool and there could still be the need to manually write code. This is actually the main (only?) issue with this solution, that needs more time and requires some technical skills for designers to be able to produce what they have in mind. Anywyay, there are many interesting framework for designing rich web animations, such as Framer.js.

Macaw, one of the most interesting amongst the new web design tools that have been released recently. It creates clean and semantic HTML/CSS code while letting you design in a pure visual fashion

Origami / Quartz Composer

Recently, Facebook released Paper, a mobile app designed to change the way we interact with our social feed. The app is stuffed with delightful micro-interactions that create a sense of awe in the user. More than that, in the design community, a lot of buzz was generated around the tool that the Facebook Design team built for the project: Origami. Created on top of Quartz Composer, an existing Apple application (released in the Mac OS X developer package), Origami is meant to solve the needs we’re talking about in this article. The ability to create really fine-tuned interactions that can react to user actions, without writing a single line of code is the main advantage of this solution. However, the logic behind the application requires some learning time (and a previous knowledge of Quartz would help a lot). Due to its novelty, there’s no much documentation available yet, even if there’s a very active community that can provide some support in case of issues.

Facebook Paper: a delightful showcase of micro-interactions and transitions

Wrapping up

As you may imagine, there is no one-size-fits-all solution, but rather an array of options from which we can choose, depending on the project needs. From simpler ones (GIFs, mockups sequence) to more complete and time-demanding ones (animation programs, coded prototypes, Origami) the choice is based on what we need to document and how much time we have at disposal. Personally speaking I’m thrilled by the possibilities offered by Origami and – after seeing some stunning work created  by the community – I decided to start learning and experimenting with it, hoping that better documentation will soon be released. Anyway – regardless of the tool we decide to use – we all need to realize that the dynamic nature of design (animations and transitions) can’t be neglected anymore as pure UI fanciness, but that rather it has to be considered an important aspect of our everyday design work. PS: do you know any tool that I didn’t mention? Comment here or on any Social Network.

However, most of these firms miss the opportunity to make design a core element for their business.

Design usually comes after, or in parallel, to product Concept and Engineering. What happens is that designers adapt to an already delineated project, instead of having them crafting the product from the very beginning. If you want to be a great product company, this makes a huge difference.

As I wrote in a previous post, as technology levels up, competition on technical specs and features becomes increasingly irrelevant for users: the result is that design gets the main stage. Then, designers should get the main stage too. From the book Keep it Simple by Hartmut Esslinger (founder of frog design and longtime collaborator of Apple), we read:

[…]  bottom-up design never succeeds, because even good efforts by departments within such systems remain insulated within the layers of the company’s organizational structure and everything really new, courageous and potentially game-changing is destroyed by its passage through ‘the gates of rejection.

Hessingler stress the point that, if you want to make insanely great products, designers have to be in charge. This implies two things:

• The company structure should reflect that, having designers not reporting to engineering departments but rather directly to management
• Design has to be a priority in the company: executives should have sensibility on the subject and should be deeply concerned about it, as much as they are for the technology and marketing aspects of business. They should understand its value and promote it through the company culture

Basically, this means changing how we think.

A mentality shift

Changing the way IT companies think is no easy job: but, if done, gives great results. More mature industries, such as automotive or furniture show already the needed levels of respect for the design discipline. In IT however, even if nobody denies anymore the importance of usability and good visual design (and even old pachydermic companies have UX professionals in their staff) very few sees it as a crucial aspect of the product roadmap.

In a small post published on Medium, Mike Monteiro uses an analogy with the furniture industry. In his story we have 2 designers: one is involved in the whole process of creating a new chair and he applies a user-centric approach driving the product as a whole, and another is just involved at the end and everything he can do to fix an ugly product is to add a nice (but sad) cushion onto it. Results are pretty different indeed.

Too often, design is seen as something that can be done onto something that  have been already decided by other actors that occupy more prominent positions. This leads to poor products, not because engineers or product managers don’t do a good job, but because they simply lack the competency needed to do proper design with users as the central element. In the end, nobody ask designers to implement high-performing algorithms or engineers to provide market studies, isn’t it?

On the other hand, designers need to step up, evolving from being constricted in the visual design field towards a more cross-functional competence. Industrial designers, for example, know pretty well the manufacturing techniques used to build what they’re designing. Why UX Designers should not care about the technological, functional or business aspects of the project they’re working on?

To summarize, design has to be prioritized by managers and designers should work side by side with engineers and product managers from the very beginning to guide the product into the right direction, to act as design facilitators. Design is problem solving and good ideas can come from anybody (countless times I saw great design ideas proposed by engineers or product managers) but it’s the work of the designer to organize, filter and put them in practice, with an eye always on the user and his needs.

Because, no matter what, at each step of the project design simply happens. It’s then up to you to decide to not let it happen by chance.

I published this article on medium.com as well. Check it out there and enjoy the wonderful reading experience.

Literally, everybody was talking of it: UX Design, User Interface Design, Visual design. Well call it as you prefer, but it went mainstream.

This is not a sudden change: the shift have been happening slowly but steadily in the last years. Apple is – of course – a precursor on this journey: Jobs’ company focus on good hardware and software design has been in its DNA since the beginning. With the iPod, the iPhone and the iPad this design taste has just reached a much much wider audience. In the last couple of years Microsoft and Google joined the race by providing more and more sophisticated design for their products and actually giving a strong contribution to what is the currently dominant trend: Flat Design.

And that is physiological: when you can’t compete only only around tech specs or endless feature sets, the key selling point of a product becomes its User Experience.

Talking about the current mobile industry landscape, Nick Summers correctly points out how the average user will eventually end up ignoring the specs of the phone he’s going to buy, by going for a “phone that just works”. Don’t get me wrong: specs will still be important, but only as soon as they can influence the experience of using the device, otherwise they become irrelevant. Comparing the mobile industry to the car one, Nick says:

Similar to the car industry, incremental changes under the hood – improving the power, fuel consumption, safety features and so forth – will become secondary to our personal tastes.

– Does it drive well?
– Do I like the design?
– How does it make me feel on a day-to-day basis?

Working in the IT industry, I can get how more and more tech guys and managers are increasingly talking about design and user experience. Even if they may not get its meaning completely, it seems that people working in the IT sector are finally understanding the real business value of the final User Exprience, of how the product will look like.

Nevertheless, even if we’re maybe finally getting into the era of Design we shouldn’t forget what a famous guy once said:

Most people make the mistake of thinking design is what it looks like. People think it’s this veneer – that the designers are handed this box and told, ‘Make it look good!’ That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works.

Steve Jobs, in The Gut of a New Machine

[spoiler: a redesign of this site is coming soon. Stay tuned!]

At first impression, when I saw the icons, the lock and the home screen, the typography and the control center I wasn’t very happy. By just looking at the screenshots (first error) I thought that the Apple design team just borrowed inspiration from other products (Android, Windows Phone and WebOS) and put everything together in a kinda-non-polished-way.

However, while the graphics still seems unfinished and the lack of polish is evident (you can know more about it by reading this excellent article) I would like to focus more on the positive things I saw in this redesign, leaving the bad ones (that I mostly agree with) on other blogs.

When I finally saw some live demos of the OS, I suddenly realized that Ive and his team were not just willing to jump on the “Flat UI” bandwagon. Actually:

iOS7 is not just form. It is, above all, function

There are three main aspects of the OS that I especially like and I would like to talk about: first, it’s a content-focused OS. Second, it relies more and more on transitions than on graphics. And last, it provides a better functional hierarchy. Let’s see what it means.

Content-centric OS

The UI literally fades away in iOS7: it’s lighter and removes all the unnecessary realistic elements that were present before. With edge-to-edge content, the real information (the one that matters most) gets the primary stage that it deserves. Like pointed out in this comprehensive article by Matt Gemmell, by comparing side by side iOS6 and 7 screenshots, it’s clear how the new design was a much-neeed breath of fresh air. The interface is secondary and very minimal: content and its direct manipulation is what matters most. The new design is also much brighter than its predecessor, with fewer gradients, shadows and 3D effects.

Contacts app comparison on iOS 6 and iOS 7

Receiving a phone call on iOS 6 and iOS 7

However, this can easily lead to some excesses, like the bare screen of the Reminder app, that remind us of the first Gmail redesign where almost all graphics are removed for the sake of simplicity. Getting to know what is tappable and what is not becomes a bit difficult in this case.

Reminders app on iOS7

Does this new direction sacrifice ease of learning? Maybe yes, and the lock screen without the clear left-to-right unlock bar is a clear evidence.

However, we can affirm that the whole system relies less on obvious visual affordances and more on what is covered in next paragraph.

Movement is life

The new OS introduces a much richer set of animations that responds to user actions and even phone movement. The designers seemed to have put a lot more focus on the design of transitions, animations and interaction than on graphics and pixel art.

iOS7 is less graphical and more kinetic.

We can see an example in action in the new Message app, where the message bubbles get a a “bounce” effect during scrolling.

Then, while the graphic seems flatter, the much richer set of animations and visual effects go into the opposite direction: bringing real-world physics into the digital world. For example, the background responds to user movements by providing a parallax effect that gives a sense of depth to the home screen.

iOS7 background parallax effect

Information hierarchy through graphics

In his iOS7 presentation video, Ive talks several times about the use of translucency to give to the user a sense of “context”. While translucency can lead to design errors, due to its unpredictability (the semi-transparent menus can become unreadable with the wrong background color), I think that it becomes very useful to give the impression of different functional layers in the UI.

iOS7 functional layers

Using a blurred translucent background lets the user understand where it is and what is behind. While computationally expensive, the graphic effect is much more than eye-candy: it’s fully functional for the OS purpose.

By coping it with the parallax effect for the background, the user feels that there are 4 distinct information layers in the OS: the control/notification center, the app screen, the home screen with its icons and the background.

Conclusion

iOS7 is a great step forward and I’m sure that what we’ve seen in WWDC 2013 is only an early beta that will be refined and polished before the fall release. I think (and hope) that all graphic flaws that have been pointed out will be soon fixed.

It’s the major redesign of the OS and it comes few months after Scott Forstall’s departure (the paladin of skeutomorphism and realistic UI) and Ive’s takeover of the software design lead.

iOS7 is a good foundations for the evolution of Apple design language: it’s a great basis to start building something new. The message is: simplicity, more content and do focus on transitions rather than graphics. Is it a good idea? I think so. Far from just copying other vendors, Apple is trying to do something new. And – as somebody said – “new is always better”.

Last week – on March 13th – a news spread all over the web: Google was going to shut down its popular RSS reader service, Google Reader, on July 1st. The reason seems to be the “focus” strategy imposed by CEO Larry Page, that aims to put more effort in developing few core products rather than spreading the resources of big-G across a myriad of projects.

It can be argued if shutting down a service with a loyal (while diminishing) user base in favor of a web “social thing” (Google+) that aims to be the 3rd millennium version of 90’s portals (everything in one place) is a brilliant idea. However Google has the full right of not providing anymore a service that was given for free.

It’s not about the application

Google Reader for sure wasn’t the best RSS client out there: its design is a bit dull and plenty of better alternatives exist. I already switched to Feedly for desktop and I’ve been using Flipboard on mobile for quite a long time.

Google Reader-powered Flipboard for iPad

The problem is another: Google Reader is the API that keeps in sync all the RSS clients I’m using. I can login in Flipboard, Reeder or whatever service I like and then add my Reader account to have all my feeds automatically imported. If I want to add a new feed I can do it through the Google account and then finding it across all the platforms I use.

Now, RSS clients – both desktop and mobile – will run on their own API, but every time I’ll have to add (or remove) something from my subscriptions, I’ll need to do it several times – independently – for each application.

Reader was the de-facto standard for RSS subscription, not fruition. I fear we will have to wait a while until something else emerges as the new leader in this role (if anybody knows a service that can be used for this purpose, please put a comment down here)

The social game

Google is betting on social networks as the new – and only – mean of getting information: they’re probably right. I already use a lot Twitter updates to stay up-to-date with people and blogs I also follow through RSS; however I keep going on my Reader to spend time reading and browsing my feeds to stumble upon something interesting (remember serendipitous browsing?).

In the long term, RSS is probably going to disappear and Google move is just an acceleration of this process: Tweets and Status updates are way easier and speedier mean to broadcast and consume content (have you ever seen your mom subscribing to an RSS feed?). However, while confined to a minority of power users, RSS clients deserve their place in the world, at least for a few more years.

The driver behind this complex process has been a new aesthetic made up of squared lines, flat colors, no gradients and almost no shadows or other realistic elements, plus a special attention towards typography.  An aesthetic that has been embraced also by Microsoft with his Metro design language (even with some exaggerations) and a lot of upcoming sites and apps designs.

As its popularity grew, we needed to have a name to call it and  – eventually – it was flat design.

Suddenly opposed to (in)famous Apple skeutomorphic – or more appropriately named “realistic” – approach, this style seemed like a bunch of fresh air after years of overused gradients, shadows, 3D effects and textures.

The main concept is that we – as designers – should embrace the medium on which we’re working, avoiding to mimic elements from other domains.  If most of the buttons on websites have gradients, a 3D-like aspect and drop shadows it’s because they’re trying to reproduce real buttons and behave like them. Thus, in purely flat design, buttons become colored rectangles, without any ornamental aspect.

Flat design puts the focus on content, with the interface that falls behind the scenes and does what’s intended to do, that is supporting content fruition. Moreover, as we interact more and more directly with our digital devices though touch and gestures, the content itself becomes the interface reducing the needs to have buttons and other indirect controls.

The opposites: completely flat (left) vs hyper-realistic (right) controls. What do you prefer?

Beware the  “too flat” design

From the LayerVault post that gave flat design its name:

Designing honestly means recognizing that things you can do with screens and input devices can’t be done with physical objects — more importantly that we shouldn’t try copying them. It takes too much for granted.

I agree that merely copying physical objects just for the sake of it is bad.  Look on some examples to get what I mean. Also, it’s quite easy to introduce styling elements like textures, reflections, shadows and all similar bell and whistles and then overuse them.

However realistic UI can’t be named bad as a principle. Using elements that recall the experiences we have with other mediums helps us leverage our knowledge and use it to understand how something works. Putting a shadow (even light) under a button is a good way to make clear that the element is clickable. Moving it down a bit when pressed gives a good feedback that something is happening.

iOS Google Maps application does a great job in combining really subtle realistic elements (shadows, embossed icons) with a minimal, flat interface

Using a “too flat” design removes the affordances from the interface making it less intuitive and learnable. Where can I tap/click? This is even more important on touch devices, where hover states can’t be used as affordances to tell interactive elements apart.

Moreover, too flat designs could appear a bit dull if not supported with good color schemes and great typography.

Conclusion

As Sacha Greif correctly points out:

whenever we use it, it’s important to ask ourselves if we’re embracing flat design because it’s a better solution to whatever problem we happen to be solving, or if we’re just trying to be different (and ending up being just the same as all the other people who are trying to be different too).

I personally like the lighter and minimal approach to which the web is evolving. The next redesign of this site (coming soon) will be somewhat in that direction too. However, like any other idea, using it as a dogma is potentially dangerous.

Thus, beware the “too flat’ design that removes any familiar element from the design. And, moreover, always keep in mind that the goals and the needs of your user should drive your choices, not viceversa.

Update:  check out the great essay Sacha Greif published about Flat vs Skeutomorphic design.

You probably already know Kinect, the gesture controller developed by Microsoft for its gaming platform Xbox360. If you ever tried to use it, you could have been likely well impressed by how “different” it felt: choosing your film by waving your hands, dancing or even playing sports seems much more cool and funnier, especially when done with somebody else in the room. However, you probably  also noticed how imprecise the controller is. It can’t recognize finger movements for example, and also the body tracking is sometimes not really “sharp”. Nevertheless, it has been praised – with reason – as a big innovation in the field of Human-Computer Interaction; however we’re still far away from the gesture controlled dashboard seen in the sci-fi movie Minority Report.

At least for the moment …

Enter Leap Motion

A few weeks ago I discovered the existence of Leap Motion, a gesture-based controller that promises to revolutionize the way we interact with digital devices. I was astonished by the video demo published on their website, where the controller is claimed to have a 1/100th mm accuracy. Yes, you read well: 0.01 mms! My reaction was: wait, too easy to claim your product to be hyper-fast and super-precise in a completely controlled demo. How could it work in real life? So I had a look around on the web to find some opinions: and every review I found, from Wired, to The Verge and Engadget was nearly enthusiastic.

Leap Motion demo video

All the people that used the controller were doubtful as me, but as soon as they tried they were mesmerized by the impressive precision and – above all – the imperceptible lag. As declared by producers the latency between the movement of the hands and what was on the screen was zero. And that’s huge, if compared to what happens on Microsoft Kinect (150 ms on average) or also on touch devices (around 80-100 ms) where there’s a noticeable delay when you wave your hands – or move your fingers – too fast.

Leap Motion is a small USB device that can be connected to any PC or Mac and it’s in pre-order phase at a cost of 69.99 $. The plans of the company – who just raised $30 million  – are to integrate the controller directly in computers, tablets, smartphones and any digital device you could imagine. It seems that Asus will be the first one to integrate one in its PCs.

Stunning… Then what?

Like multi-touch, before becoming ubiquitous, gesture controllers need to be used effectively in a few definite areas to prove their effectiveness. Only starting from that this innovation could find his way in our everyday life like multi-touch did. Starting from the iPhone and few high-end smartphones, it proved to be reliable enough for simple applications. Then after few years of use, many realized that it could be employed also in more traditional domains, like for example photo-editing or writing software. Now multi-touch displays are everywhere, from your notebook to your car control panel.

So, what are the most interesting early adopters use cases for our new shiny gadget? One of the first one that comes to my mind is when you need to use a device, but you can’t have physical interaction with your input devices, like touch or even the mouse. Maybe your hands are dirty or wet, or you can’t reach the touch controls. For example a smart shower control panel, that can be controlled through gestures, to change the temperature of the water, control the flow, play music or turn on the TV (yes, shower TVs already exist!). Direct interaction through multi-touch is impossible and waterproof physical controls may be much less usable.

And what about medical devices that can be used with gestures by a doctor while doing surgery without touching anything with his hands? Complex interactions and manipulation of 3D models on a screen is another interesting case in which a NUI could improve the overall experience.

And – of course – games! The LeapMotion is really precise and fast and would allow a direct and immersive gaming experience. First-person shooters, arcade games like Fruit Ninja would be even more funnier with such a controller. Kinect already brought NUIs to gaming and the results – despite the not-so-stunning performances of the sensor – are really encouraging, particularly in case of multiplayer games.

Wrap up

Of course, there are still some doubts about this interaction paradigm. The lack of a physical feedback is one of the biggest drawbacks when talking about gestural interfaces. One thing is to grab a gun with your hands in a game, feeling it with touch, another is to wave your hands in the air pretending that what you see on your screen is “real”.

Above all – like it was done for touch – a common interaction paradigm should be followed in order to provide coherent and learnable gestures to use. In this sense, a great help has to come from the application itself that should provide continuous feedback in order to tell the user what he can – or cannot – do.

Leap Motion – thanks to its amazing features and  really competitive price – is making a lot of buzz in the tech world. As soon as designers and developers will be able to deliver compelling applications to play with it, it will jump outside  the early adopters circle towards the main audience. In the coming months, if you see somebody waving his hands in front of a computer, don’t think he’s trying to make a sort of magic trick to make it work.

Most probably, he’s using the technology that will make multi-touch obsolete.

We’re in a period of transition. The search-centric Internet is changing and giants like Google are already facing this change with projects like Google Now (we will talk more about it later). We – as designers, developers and entrepreneurs – should aim to reduce the information overload on people, providing great content that delights the user while easing the burden to search explicitly for it. The aim is to bring Serendipity into play.

A foreword

From Wikipedia, Serendipity is defined as:

The accident of finding something good or useful while not specifically searching for it

or even better:

Serendipity is looking in a haystack for a needle and discovering a farmer’s daughter

On the Web, we have serendipity when we go on 500px and we find by chance a great photo while looking into our “flow”. Or if we go on Amazon Windowshop wth our iPad and the book we always wanted is displayed in the home screen. Or again, if we go on Twitter and we stumble on a really interesting conversation. What is common between all these situations? The fact that we weren’t looking for that specific thing, most probably we weren’t looking for anything at all, we were just “killing time”.

Bored now

The mythical mobile “man-on-the-go” usage. Are we sure this is the main usage of these devices?

By looking at typical mobile (on whatever device) usage patterns, Google found out that can be broken down into three main categories:

1. Repetitive now. The user checks the very same piece of data over and over again: examples include checking Facebook statuses, new Tweets, stock performances.
2. Urgent now. The user needs urgently something very specific, like directions to the airport or the name of the song he’s listening to.
3. Bored now. The user has time to kill and wants to spend it enjoying a good digital experience.

While these groups seems quite limiting (for example, what about people that are looking for content to learn?) they effectively show what people commonly do with their devices. In our case, the latter category – bored now – is the most interesting one. It is where Serendipity comes in play, where we can delight the user with unexpected and relevant content. The user has some spare time and he barely knows what he want to read/watch/listen.

However, also in the other cases we could greatly help the user by providing “just-in-time” relevant information, thus reducing the cognitive effort needed. Google now is an example of artificial serendipity applied to the first two use cases. Complex algorithms analyze your personal data to give personalized recommendations even before you need to ask them.

Apart from that, how we can design a product to foster Serendipity, without the needs to develop a complex technology like the one just described?

Serendipitous devices

In the bored now group the main user activity is casual information surfing: we can call it Leisure Browsing.
While Leisure Browsing can be accomplished on almost any device, there are some that are better suited for this particular use. Which ones? Think about it: what would you use when you have some time and you want to relax a bit? What is the mostly used device while sitting down on a train/bus and, above all, in the couch or in bed (or even the toilette)? Tablets of course.

A girl browses Flipboard while laying on the couch

Tablets are the perfect “killing time” machine:

• They have enough screen estate to make the browsing experience painless and to present image-heavy content
• Their form factor is ideal for relaxed contexts
• Touch-based interfaces are (usually) easy and intuitive to use

Thus, if you plan to create an app/site that puts Serendipity at the center of its User Experience, remember that you should put an eye on designing the experience for these devices. However, what are the characteristics of such a design?

Fostering Serendipity

Serendipity doesn’t come by itself, it needs to be designed. If we want to create this magical feeling of semi-casual discovery, if we want to facilitate leisure browsing activities, we can use few techniques and learn from successful examples.

1. Go visual

The most effective way to provide striking content is through images (or videos). This is because we – as humans – react naturally to them: at the end we all live in an image-based – not text-based – world. An image effectively and quickly conveys its message and moreover it’s usually more aesthetically pleasing.

This seems obvious, but actually it’s not.

Flickr has provided for years a great service to photographers and amateurs that got the chance to store and showcase their work to the public. However, this latter part (showcasing) is where Flickr failed to evolve, mostly in its interface. We can compare the Flickr homepage with the one of its newer competitor, namely 500px.

The home page of Flickr reserves few space for images

500px home has big, beautiful images occupying the whole page

You can see how the 2nd site is much more image-driven. 500px uses big images, arranged in a masonry-style layout with infinite scrolling: a common feature in serendipitous, addictive websites (Pinterest I’m talking about you). No need to say which one is more aesthetically pleasing and encourages further exploration and content discovery.

2. A simple Information Architecture

A complex and deep Information Architecture may seem overwhelming for somebody who’s just willing to browse randomly your content. This is mainly because the user would need to take time and make an effort in order to understand this complex structure. Instead, keep a flat hierarchy with one or two levels, in order to encourage user exploration. Then use taxonomies, social tags or broad categories to organize and create horizontal connections between the content items. If it’s not possible to use a flat architecture, try at least to simplify the browsing experience by always presenting samples of content at every hierarchy level.

The Information Architecture in SVPPLY is very simplified, with very broad categories and a layout that encourages product exploration

The architecture of eBay reflects the goals of the website. Deep and detailed product categories, accompanied by samples of content in the intermediate levels

Compare the IA of a Serendipity-oriented eCommerce website (SVPPLY) with a search-oriented one (eBay). You can see how detailed and deep are the product sections of the latter, while the first one presents broad and very few recognizable categories. Still, also eBay tries to enhance the leisure browsing experience with samples of content at every intermediate level.

3. A good starting experience

Leisure browsing is usually performed during relaxed time spans of our daily lives. However, that doesn’t mean that these spans do also last long. Indeed, the attention and the patience of the user are usually limited goods.

A direct consequence is that nobody wants to lose much time doing some setup phases. Thus, try to provide at the very beginning an already satisfying experience: do your best and then improve on that by learning from user behaviors, preferences, likes, social interactions, explicit settings, etc.

That’s why Pinterest suggests users to follow just after the signup or why Fancy presents popular items in the home page even before signing in. They’re making guesses and trying to give immediately the user something to browse, even if they know nothing about him/her.

4. Go Social

The Fancy is one of the hottest websites of the moment. Its core concept is “social shopping”: users can “fancy” interesting objects they see on the Internet and collect them in lists. What is the difference with Pinterest? – you may ask. Well, on this site you can also buy these objects.

The Fancy lets you “fancy” cool stuff from around the web and follow other people in order to find something cool to buy.

What happens is that you end up spending 1 hour exploring randomly the site, by looking at your followers lists or the predefined categories the site proposes, jumping from item to item. It’s a social shopping website that tries to make user buy products by focusing its experience on the serendipitous discovery of new things.

Quite a difference with traditional eCommerce websites that assume the user has a clear idea of what he wants to buy. Adding the social dimension make people feel a “human” touch behind what they find, increasing the possibility of a purchase.

Moreover, did you notice the ice-cream logo on the top-left corner? If you click on it, it will show you a random item taken from the collection. Quite a subtle cool feature that goes well with the “exploratory” spirit of the site..

5. Personalize

Use the information you have about the user to personalize its experience. There are tons of techniques out there – that fall into the “Recommendation engine” field – both simple and complex that can be used to give a personalized experience to the user.

Stumbleupon is a web service that shows pseudo-random sites picked from around the web to the user, that can therefore “stumble” on something interesting in a truly serendipitous manner. At the very beginning, the sites presented have nothing to do with the preferences of the user, that can only choose the broad category s/he wants to explore. However, he can put “likes” or “dislikes” to the sites he sees and this lets Stumbleupon learn and present content increasingly tailored to user preferences. In this way, the user will then have more chances to “stumble” on something interesting.

6. Content is king

Pinterest boards are filled with fancy and classy content, from wich we can easily get inspiration

To be very direct:

you can’t tempt the user to spend time on your content if your content sucks

No matter how nice and innovative your user experience is, the content will be always the last and most important thing evaluated by the user.

That’s why Pinterest has been so successful compared to dozens of other image tagging websites that existed before. By carefully controlling the access to its early users, Pinterest built its initial content base with quality, classy and fancy stuff. Products you may find on Etsy, designer clothes, classy furniture, exotic holiday destinations, good-looking food dishes, etc etc.

Thus, remind, always keep a special eye on your content, its flavor and its quality.

Conclusion

The shift from a search-centric web towards more serendipitous experiences has been going on for years but it has literally skyrocketed with the mainstream adoption of digital devices as a “leisure” platform. This change goes along with the introduction of tablets and ubiquitous mobile devices and the evolution of the computer as the center of our entertainment activities. These changes brought new usage patterns for digital content that focus on relax, leisure and lazy exploration.

Computers, tablets and smartphones are absorbing usage patterns of older media, like TVs and magazines, with experiences that become – in certain cases – more “passive”. No more only active searches, but passive browsing or casual inspiration (look at easyJet InspireMe). The techniques presented here, like focus on visual contents and social interaction, easy-to-use and appealing interfaces, personalization and great content are really important in this evolution.

An evolution where Design – more than mere Technology – is finally playing the leading role.

Resources

• Google now: behind the predictive future of the search. A detailed review by The Verge about big-G’s latest magical trick
• Addictive UX: Why Pinterest Is So Dang Amazing. A great insight into Pinterest secret formula. It highlights the design and content strategy tricks that have brought the website to its stellar success
• Findability paths (Percorsi di trovabilità, ITA). A interesting presentation about serendipity in the web. A lot of the examples of this article come from these slides.

In this article we’ll see three reasons why tackling even a small website project from the Mobile first perspectivewill benefit everybody, not only mobile users.

1. Mobile means focus on what’s important

If you ever designed for mobile, you already know how much this statement is true. Screen real estate is obviously limited and the information architecture needs to be simplified. Thus, from the 1000 features you thought for your site/app, you will be forced to sort out what really matters. How you can do that? By keeping an eye on what the user is trying to accomplish (main user goals). And that’ great.Otherwise, you could get something like this:

The app provided by my French bank: too many features?

It’s easy to see how overcrowded is the dashboard of this banking app: 12 icons to choose from, with the most important ones lost in a sea of other pretty irrelevant functionalities. Moreover, there’s a sub-level of 15 functionalities if you tap on “Autres” (More). What the typical user commonly does with a mobile bank app? He checks the account balance, maybe the stocks, maayyybe his credit card movements and ATM locations. Meaning that 75% of features you see here won’t be probably opened by 90% of users. It was really needed to include them? And – if it was the case – these features should carry the same visual importanceas the most important functionalities? Don’t think so. To sum up:

Tackling design from mobile lets you sort out what are the core features of your service.

Then – once your screen real estate grows – before including something new try to find a good justification for that, otherwise drop the feature. The result will be a cleaner design with few prominent task-oriented functionalities.

2. Mobile means focus on what’s important / reprise

“Wait… You didn’t already talk about this?” Well, yes but now I want to talk from the content perspective. Let’s keep in mind that:

There is no such thing as writing for mobile. There is just good writing

From “Uncle Sam Wants You (To Optimize Your Content for Mobile)“, Breaking development, Dallas.

However, if you author content with the mobile user in mind, you will streamline your work down to what is essential. This is forced by limited screen estate – for sure – but also by the peculiar contexts in which these devices are used. Users won’t probably have their full attention dedicated to your content (hey! are you watching TV while reading this?) and in some cases they won’t even be able to look at the screen. Thus, focus and clarity in content really helps make it more easy to understand in these situations of use. At the end, the result of this process – clear, concise and relevant content – will be good also for any other type of consumption device.

3. Mobile love performance, so do we!

The last decade has seen a tremendous increase of the average web page size, that is now about 1.1 MB, according to HTTP Archive. Flat connections, multiple CSSs, heavy Javascript libraries, social plugins and plenty of images made our sites explode. Nobody cared much about how slow the web was becoming. How many time did you include the whole jQuery library just to achieve a fancy hide/show animation? I did it. More than once. Mobile browsers are great, much better than the corresponding desktop ecosystem, but mobile connections aren’t: they’re relatively slow (until 4G becomes widespread) and unreliable. Moreover, some smartphones CPU are simply not powerful enough to run complex scripts on the page (hey, Flash can you hear me?). So, by working on mobile we’re forced to care about performances: optimize CSS and javascript use, compressing and combining images, use CSS3 whenever is possible to avoid images, limit content length and media size, etc. No need to say that when we move up to bigger screens, these performance gains will be really appreciated too.

Wrap up

The ones we just saw are 3 reasons why mobile-first should be an approach to follow even for the simplest website. Many other reasons exist, like accessibility, global reach, ubiquity, etc. However, keep in mind that:

If you think that working on mobile is only about constraints you’re completely wrong

Mobile devices open up countless possibilities that are not even imaginable for old-style devices: geolocation, ubiquity, personalization, augmented reality, device sensors, physical interaction, etc. That’s why you should take advantage of these features and sometimes provide something more/different to your mobile experiencewith respect to the standard one. But that’s another story. Stay tuned…

Resources:

• Mobile First, in this book, Luke Wroblewski explains a new approach in designing for mobile, by exploring reasons and common patterns. The book makes a good point in telling why all users will benefit if you start thinking from the smaller screens.
• Mobile content strategy: in her presentation, Karen McGrane tells us why and how we should plan for great content for mobile users
• Think with Google: a collection of research, marketing insights and studies regarding the IT industry

Il protagonista – Tom Cruise – cammina in un centro commerciale dove, grazie ad un sistema di scansione della retina, viene identificato da cartelloni pubblicitari “intelligenti” che gli propongono pubblicità personalizzate, chiamandolo anche per nome. Fantascienza? Non proprio…

Annunci proposti da Gmail mentre leggevo una newsletter sullo sviluppo Javascript. Personalizzati in base al contenuto della mail e al mio profilo.

Su Gmail riceviamo continuamente piccoli annunci pubblicitari: se facciamo attenzione, noteremo che quasi sempre questi annunci non sono casuali, ma sono attinenti al contenuto della mail che stiamo leggendo. Google – con la piattaforma AdWords – propone inserzioni personalizzate in base al contenuto che stiamo leggendo (riceviamo una mail di un nostro amico che ci propone un viaggio a Madrid? Ecco che arriva la pubblicità per un hotel in città a prezzo scontato!) e anche in base al nostro profilo che l’azienda di Mountain View traccia continuamente.

Cosa c’é di diverso dalla scena del film? Gli scanner della retina non sono ancora stati installati nei centri commerciali, ma la tecnologia oggi a disposizione é tuttavia più che sufficiente perché uno scenario del genere non sia solo plausibile, ma anche realizzabile. Ed é quello che sta accadendo sul web già adesso, dove non serve nessuna scansione dell’occhio per identificarci. I futurologi che Spielberg aveva consultato per la realizzazione del film sapevano bene a cosa andavamo incontro: la personalizzazione delle informazioni. Sul web possiamo andare oltre e parlare di personalizzazione della user experience.

Tentare di adattare l’esperienza dell’utente non è nulla di particolarmente innovativo (i sistemi adattativi esistono dall’inizio degli anni ’90), ma le tecnologie a disposizione oggi e, soprattutto, i dati che ci riguardano reperibili in rete non sono mai stati cosi ricchi ed accessibili.

Un esempio banale? Ogni volta che accediamo ad Amazon con il nostro account, il sistema di raccomandazione del sito ci propone dei prodotti che “pensa” ci possano interessare. Come fa? Provate a pensare al sistema di raccomandazione come ad un negoziante di fiducia che conosce le nostre abitudini d’acquisto, cosa  abbiamo già comprato, i nostri interessi, la nostra propensione a spendere, ecc. Tutte queste cose – vi chiederete –  come le può sapere?

Il flusso incessante di informazioni che ci riguardano sul web (ció che diciamo di noi sui social network, i nostri acquisti online, le  ricerche fatte su Google, i checkin su Foursquare, ecc) va a comporre un puzzle che rappresenta la nostra personalità online. Il compito dei sistemi adattativi é ricomporre questo puzzle partendo dai singoli pezzi che hanno a disposizione, privacy permettendo. Per sintetizzare:

Per web personalizzato o adattativo intendiamo la capacità di siti o applicazioni di adattare  la User Experience (contenuti, interfaccia, grafica, navigazione, ecc)  in base a fattori come il profilo utente, il contesto, le interazioni sociali, il device utilizzato, ecc.

Come avviene questo processo? E soprattutto, a partire da quali informazioni? Il punto di partenza è solitamente il profilo utente: vedremo tuttavia, senza entrare in dettagli tecnici, che ci sono altri fattori da tenere in considerazione.

1. Profilo utente

La maggior parte dei sistemi adattativi usa questo tipo di dati per proporre contenuti personalizzati. Informazioni semplici come fascia demografica, sesso, occupazione e interessi personali, ma anche più complesse e dettagliate, come un film che ci è piaciuto particolarmente o un luogo che abbiamo visitato e ci ha colpiti. Da dove provengono questi dati? Il metodo più semplice consiste nel proporre questionari da compilare all’utente. Tuttavia, nessuno ha voglia di compilare lunghi e noiosi questionari. I designer si sono quindi ingegnati per trovare soluzioni creative alternative per ottenere le stesse informazioni, in modo più diretto e coinvolgente.

Tripadvisor chiede ai propri iscritti di compilare una mappa con i luoghi visitati, preferiti e quelli che ci piacerebbe visitare. Ci invoglia a compilarla mostrando quella dei nostri amici (estratti da Facebook). Un metodo alternativo ad una scomoda form per ottenere informazioni preziose da utilizzare per la personalizzazione

La maggior parte delle volte, invece, questi dati vengono dedotti in modo “implicito“. Clicchiamo “mi piace” o “+1” su una pagina? Stiamo insegnando al sistema (sia esso Google, Facebook o quant’altro) qualcosa sui nostri interessi personali.

Nemmeno i risultati dei motori di ricerca sono esenti dalla personalizzazione. Google traccia il nostro profilo (sia che siamo loggati o meno) e usa fino a  57 indicatori diversi (ricerche precedenti, device, luogo, +1, ecc) per personalizzare il ranking dei risultati. Google non è più uguale per tutti.

Molti siti ci consentono di registrarci connettendo i nostri account sui social network (Facebook, Twitter e, molto presto, Google+). Quando scegliamo questa modalità, non stiamo solo evitando una noiosa form di registrazione, ma stiamo anche fornendo al sito – la maggior parte delle volte – accesso ai nostri dati personali, che verranno estratti dal nostro profilo e usati per personalizzare la User Experience. Abbiamo indicato i nostri film preferiti nei nostri interessi di Facebook? Bene, un sito come Netflix (servizio per la visione di film in streaming che attualmente possiede uno dei migliori sistemi di raccomandazione esistenti) usa anche questi dati per proporci i film di nostro gradimento.

Netflix propone delle raccomandazioni in base ai film che abbiamo visto in precedenza, ai voti che gli abbiamo assegnato e al nostro rating dei generi. Usa anche i nostri dati estratti da Facebook (es. interessi, film visti, pagine), se forniamo l'accesso all'account

La personalizzazione sulla base delle nostre informazioni personali è probabilmente la più potente: le pubblicità più mirate ed efficaci sono quelle che si trovano su Facebook. Sembrano quasi sempre adatte a noi e quello che ci interessa. Gli algoritmi che le selezionano “leggono” i ricchi dati che ci riguardano in possesso del social network e ci riconoscono, proprio come i tabelloni pubblicitari di Minority Report.

2. Contesto d’uso

La pagina "Luoghi" di Foursquare ci propone i luoghi e gli specials più interessanti vicini alla nostra posizione

“Contesto” è una nozione dai contorni abbastanza sfumati: nel nostro caso, per semplificare un po’ le cose, possiamo considerarlo come il luogo e il periodo temporale in cui stiamo utilizzando un’applicazione. Cosa significa quindi personalizzare la nostra esperienza in base al contesto? Facciamo alcuni semplici esempi.

Foursquare ci propone luoghi interessanti e Specials (offerte speciali), calibrandoli sulla nostra posizione fisica. Nulla di particolarmente complicato, che è stato però reso possibile da un’innovazione tecnologica: il sensore GPS installato negli smartphone. Aziende come Groupon, hanno puntato tutto fin da subito sulla pubblicazione di offerte e sconti personalizzati per le varie città, in modo da fornire  al proprio utente solo le informazioni che erano veramente rilevanti per il suo contesto.

Applicazioni più sofisticate potrebbero invece pensare di fornire contenuti adattati alla fascia oraria. Immaginiamo un feed reader “intelligente”, che raccomanda contenuti differenti quando di mattina ci troviamo a lavoro (articoli legati alla nostra professione) oppure la sera o nel week-end a casa (articoli riguardanti i nostri hobby, eventi, programmi TV) proprio per fornirceli nel momento in cui è più probabile che verranno apprezzati.

3. Device

Negli ultimi anni, abbiamo assistito ad un aumento vertiginoso dei dispositivi connessi in rete: una crescita destinata a diventare ancora più veloce nel prossimo decennio. Il PC viene via via rimpiazzato da una marea di nuovi device: smartphone, cellulari, tablet, Internet-TV, ecc sono mezzi sempre più utilizzati per accedere a Internet. In più, le interfacce multi-touch hanno rivoluzionato il nostro modo di interagire con il mondo digitale, rendendolo più diretto e fisico.

E’ ormai quindi un requisito essenziale, per il progetto di un’applicazione, la capacità di adattarsi al dispositivo attraverso la quale verrà usata, alle costrizioni che introduce, alle opportunità che offre, ai differenti form factor. Non si tratta solo di applicare principi come responsive web design o pattern per la progettazione multi-touch, ma anche di capire come e perché verrà usata l’applicazione con un certo device. Ricordandoci quindi anche dell’utente che la sta utilizzando.

Proviamo a confrontare la versione desktop e quella mobile di Foursquare: le azioni a disposizione dell’utente sono completamente diverse.

• Nella versione mobile l’accento è posto sulla ricerca di luoghi (venues), in cui fare checkin, leggere e dare consigli (tips), ecc. Altre funzioni, come amici, statistiche, ecc sono solo secondarie o del tutto assenti.
• La versione desktop è molto diversa e – data la sua natura statica – la ricerca di luoghi non è nemmeno disponibile e si enfatizza la gestione della cerchia sociale (friends) e delle statistiche (badge, stats, history).

I progettisti hanno quindi capito e messo al centro della progettazione i bisogni fondamentali degli utenti dei differenti device.

Il sito di Foursquare come appare per computer standard. L'enfasi è posta sugli aspetti sociali dell'applicazione, sulle statistiche e la gestione degli amici

In Foursquare mobile (qui vediamo l'app iOS) la funzione preminente è "checkin" (assente in versione desktop). Abbiamo anche altre funzioni relative ai luoghi ("esplora", "to-do list"). La gestione degli amici e le statistiche sono invece meno evidenti.

4. Relazioni sociali

Basandosi sui dati riguardanti la nostra “rete sociale”, alcuni sistemi possono personalizzarsi in modo molto sofisticato. Il criterio più semplicistico può essere riassunto cosí:  “quello che piace ai nostri amici è probabile che piaccia anche a noi”. Per questo le informazioni di rete sono così importanti: capire quali interazioni abbiamo e con chi, cosa piace alle persone nella nostra cerchia, quali attività svolgiamo con essi, ecc.

Un esempio di sito che usa le informazioni sociali è TripAdvisor. Una volta che decidiamo di connettere il nostro account con Facebook ci verrà chiesto l’accesso, oltre ai soliti dati personali, anche ai dati riguardanti la nostra rete sociale. Dopo questa procedura, l’homepage del sito cambia radicalmente: ci vengono proposte le attività recenti dei nostri amici (recensioni, luoghi visitati, ecc.) e le  mete più popolari nella nostra cerchia sociale. L’assunzione di base è sempre la stessa: è probabile che ciò che è popolare nella nostra rete sociale possa piacere anche a noi.

Dopo aver collegato l'account Facebook, l'home page di Tripadvisor ci mostra suggerimenti basati sulla nostra rete sociale. Mete più popolari nelle nostre cerchie, recensioni dei nostri amici e la mappa dei luoghi visitati.

L’innovazione più grande in questo ambito la sta forse introducendo Google nel suo motore di ricerca. Il recente ingresso di massa di Big G nel campo social, con il lancio del bottone +1 e di Google+ introduce questa nuova dimensione anche negli algoritmi che gestiscono posizionamenti e determinano investimenti milionari. Il motore di ricerca impara a conoscerci, a conoscere i nostri amici, dando priorità ai risultati che sono particolarmente popolari nella nostra cerchia sociale.

Conclusione

Molte delle tecnologie che rendono possibile il web personalizzato esistono sul mercato da parecchi anni. Tuttavia, ultimamente, diversi fattori hanno spinto molte aziende ad investire  in questo campo, con gli algoritmi di raccomandazione personale, le applicazioni context-aware e quelle multi-piattaforma. La grande quantità di informazioni personali che circolano oggi su Internet (fenomeno dovuto soprattutto all’adozione di massa dei Social Network), la crescente ubiquità dell’accesso alla rete, che avviene ormai con ogni dispositivo e da ogni luogo, e infine, l’enorme quantità di contenuto che circola oggi in rete e rischia di sommergere gli utenti, se non opportunamente “filtrato”.

Queste tecnologie possono migliorare realmente l”esperienza d’uso di un’applicazione, che non sarà quindi mai la stessa per due utenti diversi.

My dream search engine of the future guides me throughout the day. It knows my next meeting is downtown, but the streets are closed, so I should take the subway. It reminds me that my wife’s birthday is in two weeks, tells me she wants an iPad and suggests I talk to my friend, Matt, who has done research on its Wi-Fi capabilities. Then it sends me directions to the closest store. It could even suggest a romantic restaurant nearby, search our schedules, and book a candlelit table for two.

Amit Singhal – “The Science fiction behind search”

L’articolo sopracitato – pubblicato sul magazine online Think Quarterly –   illustra la visione di Google per quanto riguarda il web personalizzato (riferimenti riportati a fine articolo).

Non mancano – ovviamente – anche i potenziali lati negativi. Vogliamo veramente avere a che fare solo con contenuti pensati per noi? Vogliamo vivere in un mondo in cui ascoltiamo solo le voci con cui siamo d’accordo? In cui un oscuro algoritmo decide cosa fa per noi e cosa no? Un pericolo che viene descritto in “The Filter Bubble”, libro in cui la personalizzazione (dei contenuti) viene descritta come una “bolla” che intrappola la nostra vita online. Per avere un breve riassunto rimando alla sezione “Altre risorse”.

In ogni caso ci troviamo di fronte ad un futuro guidato dai dati personali. Un futuro in cui la gestione della privacy sarà sempre più importante e vitale. In cui dovremo districarci in mezzo ad una mare di informazioni e in cui avremo, inevitabilmente, bisogno di un aiuto. Un futuro in cui la nostra vita digitale si mescolerà sempre di più più più più più reale, che lo vogliamo o meno.

Altre risorse

• The science fiction behind search, Amit Singhal, “Think Quarterly”
• Quello che Internet ci nasconde, Eli Pariser per “Internazionale“
• Building a Recommendation engine, Foursquare style, “Foursquare Engineering blog”