5 “Responsive Design”

http://creaturebox.com/

Site conçu pour s'adapter aux différentes tailles d'écran

http://www.smashingmagazine.com/tag/responsive-design/

Le bien

Contentu est adapté au contexte d’utilisation!

Le mal

Seulement le visuel est adapté.

6Experience immersive complète

http://creaturebox.com/

Tourisme Nouvelle-Zélande

peut����������� ������������������  s’étirer����������� ������������������  sur����������� ������������������  2����������� ������������������  écrans!http://www.newzealand.com/nouvelle-zélande/

http://www.360langstrasse.sf.tv/page/

Cirque Du Soleil

http://www.cirquedusoleil.com/en/welcome.aspx

! Attention, l’expérience immersive ne doit pas détourner l’utilisateur de la tâche principale.

7Canvas infinisScroll parallax

http://creaturebox.com/

Effet “wow” garanti*http://nizoapp.com/

Outils permettant de créer des espaces infinis

beta.mural.ly

Facile a reproduire sur la tablette*

http://webcanvas.com/

! Attention, dans un canvas infini, l’utilisateur doit pouvoir se repérer.

8Design persuasifplus subtil...

http://creaturebox.com/

Avant :

Maintenant

http://www.youeye.com/pricing

Mention honorable

Plus����������� ������������������  le����������� ������������������  don����������� ������������������  est����������� ������������������  élevé,����������� ������������������  plus����������� ������������������  le����������� ������������������  Rhino����������� ������������������  a����������� ������������������  de����������� ������������������  gazon!http://zootool.com/

9Design émotif intelligent

http://creaturebox.com/

An emotionally intelligent interaction is any state (or change in state) of a website/app where the messaging or functionality includes attention to details that create a user experience that feels organic and human. These interactions can be a big experience (like when an entire website is down), or a very small experience (such as when an error state on a form element appears). They can be derived from different elements, including messaging and copy, color and design, and respon- siveness to user inputs and system outputs. Combining each of these crafted experiences creates soul and personality for a website. And it’s that emotional connection with users that builds lasting loyalty, and raving fans.

http://uxdesign.smashingmagazine.com/2012/03/28/give-your-website-soul-with-emotionally-intelligent-interactions/

C’est cette connection émotionnelle avec l’utilisateur qui assure la loyauté des fans...

*

Jouer����������� ������������������  au����������� ������������������  Tic-Tac-Toe����������� ������������������  pendant����������� ������������������  l’attente!

http://littlebigdetails.com/

Si����������� ������������������  la����������� ������������������  police����������� ������������������  “Comic����������� ������������������  Sans”����������� ������������������  est����������� ������������������  choisie,����������� ������������������  le����������� ������������������  Smiley����������� ������������������  pleure!

Skype

http://littlebigdetails.com/

http://littlebigdetails.com/

! Attention, le design émotif ne doit pas devenir trop enfantin.

! Attention, le design émotif ne doit pas devenir trop enfantin.

MERCI! Questions Commentaires Compliments

@CynthiaSavard }INFOS! info@yucentrik.cawww.yucentrik.ca

http://creaturebox.com/

http://www.yucentrik.cahttp://webcanvas.comhttp://www.nikesnowboarding.com/productshttp://techland.time.com/2011/04/04/gesture-based-gmail-motion-april-fools-day-prank-gets-real/http://en.wikipedia.org/wiki/Parallax_scrollinghttp://360langstrasse.sf.tv/page/http://www.useit.com/alertbox/ui-chrome.htmlhttp://userexperience.evantageconsulting.com/2010/11/ui-guidelines-for-skeuomorphic-multi-touch-interfaces/http://blog.youeye.com/youeye-announces-webcam-emotion-trackinghttp://oxfam.comhttp://zootool.comhttp://37signals.com/svn/posts/2234-launch-highrise-for-iphonewww.feedburner.comwww.littlebigdetails.comhttp://www.lukew.com/ff/entry.asp?1007http://mail.google.com/mail/help/motion.htmlhttp://www.fabianhemmert.com/http://usa.autodesk.com/adsk/servlet/pc/index?id=6848332&siteID=123112http://www.smashingmagazine.com/tag/responsive-design/

http://www.flickr.com/photos/73417912@N00/4922382293/lightbox/http://mccormicky.com/1258/awesome-add-to-cart-buttons-download/

Superbes illustrations

Références