Febbraio 11, 2018Nessun commento

How do you ensure that the dev team understands the design?

Make sure the design works, get empathy with the developers, communicates with them using the same language and if you know C #, Objective-C or Swift, you will have the development team in your hands.

A few days ago I had an interesting idea about the new interface of the app I’m working on. After observations about usability and design I described my idea to one of developers. I received a quick answer: “We cannot do this!”. It doesn’t mean that my comments were wrong. My idea would compromise the whole architecture of the code implemented, the stability and cleanliness. And to build it would take about two months.

I am, therefore, constantly in the position of having to calculate any technical constraint due to the limits of development, the timing, and finally to the developers that tend to keep the code clean. So teamwork is the result of continuous negotiation and respect of small basic rules to avoid wasting time.

How do I not piss off developers?

  • Don’t be too visionaryThe ideas must work.
  • Shows the flow of the app. Where I go after the tap?
  • Work with real data in mind and think about a “scalable design”. If there is a long text, what happens? how it works in other languages? and if in the future will be adding more items to the menu, what happens?
  • Empty states if you don’t know what they are, find out!
  • Explain the reason of your choices about the layout, the colours and interactions.
  • Style guides and assets are crucial to the work of developers. You have to show which are the colours, fonts and interface. It’s also necessary to collect the assets in the right way and in folders with the right name.
  • Create a working prototype and understand by yourself if your design works or not.
  • Working prototype? Okay, show it to developers.
  • PLUS If you speak the language of developers, you can get respect. If you have a good knowledge of programming languages (HTML, CSS, Java, PHP, JavaScript, C #, Objective-C or Swift) you can be one of them and they listen to you with pleasure.
  • Never forget the user

These are the rules that I keep in mind every day to work at best with the development team.

Prototype of a playlist made with Principle, by Frank Rapacciuolo

Lately the rule that is helping me the most of all about the working prototype. It works because I understand if my design can work and it is easier to understand for developers. With prototype you can test the gestures, interactions, flow, usability, typography and the look & feel, all in one shot.Extraordinary!

There are several tools that allow you to create working prototypes, including: Invision, Marvel, Pixate and Principle. The best of them is Principle, in my opinion, because it allows you to create prototypes with realistic animations.

I think the day that Principle will allow me to reach 100%, will be an everlasting love!

Conclusions

As in every sphere, the teamwork is crucial to have a good result. A serene atmosphere where each member works in empathy with the rest of the team shows that each gear of the process works. If all the team respect the rules, the final product can be amazing.

I have included some of the rules that I have learned over the years, taking into account both the management side and the human side. With them I’m sure that the development team has clear what the design team has done.

I hope this medium will be helpful.

Febbraio 1, 2018Nessun commento

Boost your design by micro-interactions

Everyday millions of people interact with a smartphone and perform different actions: enter the password to sign in to a social network, turn off the volume, press the button like, etc …Each of these actions is a micro-interaction.

A few days ago I was testing with a friend on Facebook Messenger and I discovered something wonderful. I wanted to send a “like” (thumbs up) and I accidentally pressed the button for an extra few instants. I found out that, if the button is held down, the icon becomes larger and larger until you take your finger off the screen. I stayed there for a few minutes to repeat the operation several times, it was too funny. I was pretty dazed.

This animation is a good example of micro-interaction, because it fulfills three important functions:

  • Communicating status and providing feedback
  • Enhancing the sense of direct manipulation
  • Helping people to see the results of their actions

These are functions of a micro-interaction according to Dan Saffer, the author of Microinteractions.

What exactly is a micro-interaction?

It is a user action that triggers another action by the device. Technically it consists of:

  • Trigger: the start of micro-interaction, when the user presses the button.
  • Rules: the way in which the interaction behaves.
  • Feedback: how design communicates the micro-interaction to the user.
  • Loops: determine how long the micro-interaction goes on if it repeats, and how it changes over time.

Mobile users interact with two key design elements: features and details. The features attract people to use the product, the details are what thrills them.Using micro-interactions, you can turn something boring and lifeless into something fun and playful. The dream of every designer is an app that works well, with no bugs and easy to use, and with more attention to details and micro-interactions the app can be perfect.

Another good example of micro-interaction that struck me is the Google Chrome refresh.

 

With this type of interaction is easy and intuitive to refresh the page. It is the continuation of a natural gesture that we do instinctively which is dragging down the screen. In this case, there are two other actions: “add window” and “close window” , that represent the actions that we need when we use a browser.

Besides the useful features, there is one factor that we must always keep in mind when designing a micro-interaction: the game factor. It is so pleasant to add a new window or close it, it seems almost like I’m playing with it. Try it, it will affect you in the same way!

Loren Brichter, the creator of the “pull to refresh” interaction, says:
Why make the user stops scrolling, lift their finger, then tap a button? Why not have them continue the gesture that they are already in the process of making?When I want to see newer stuff, I scroll up. I know I made the gesture scrolling itself.

How to design micro-interactions?

Making micro-interactions is exciting for designers, because it is possible to experiment new design solutions and look for new ways to surprise the users. But for doing it you must keep in mind a few things :

  • Put yourself in the users shoes and use all that you have to figure out how they use your app.
  • Create functional animations. Animations which have not only an aesthetic but which are able to enhance the user experience.
  • Have fun and entertain your users. What the user feels when he uses the app is the reason behind the fact that he keeps using it. If the user enjoys the experience and finds it pleasant, he returns.
  • Do not be annoying. Too many animations have the opposite effect on users. Annoying users make them stay away from your app.
  • Use a human language and non-technical. A funny and ironic copy can make you forget for a moment how frustrating it might be a blank page within the app.

Another interesting example of micro-interaction is the selection of the genre within the Beats app (now Music).

 

In the Beats app, it is possible to select a genre in a fun way without being bored, making the selection like a game. In this way, you can imagine what’s going on. When the circle is pressed, genre is selected. At the bottom a “next” button appears that allows you to continue to the next step. Around the user avatar appears a progress bar that indicates the exact progress on the initial tour. Usually, the users tends to skip the steps of the onboarding without even reading what is written.

This micro-interaction captures the user’s attention and guides him through the various steps of the tour. At the same time, he is in the middle of a pleasant experience.

Conclusion

I was always attracted by the well-designed app with a functional and pleasant design. If you combine these ingredients with the micro-interactions you can create the perfect product because on one hand you draw the user’s attention, on the other you generate pleasant emotions.

The details are the design. Charles Eames

Some animations that inspire me:

 
Trello Navigation by Aurélien Salomon
The PartyUp App — Calendar Kreativa Studio
Photo Calendar for iOS by Bien Studio
Magic Tabs by Abhinav Chhikara

Resources : Microinteractions book (Dan Saffer)

Thanks for reading!