UX et UI

[vc_row][vc_column width= »1/4″ el_class= »expertise-btns » css= ».vc_custom_1530300247063{background-color: #ffffff !important;} »][vc_raw_html]JTNDYSUyMGNsYXNzJTNEJTIyYnRuLXNraWxsJTIwdG91dGVzLWV4cGVydGlzZXMlMjIlMjBocmVmJTNEJTIyJTJGd2ViZGVzaWduZXItcHJlc3RhdGlvbnMlMkZzaXRlLWludGVybmV0JTJGJTIzZXhwZXJ0aXNlcyUyMiUyMGl0ZW1wcm9wJTNEJTIydXJsJTIyJTIwdGl0bGUlM0QlMjJFeHBlcnRpc2VzJTIyJTNFJTNDc3BhbiUyMGl0ZW1wcm9wJTNEJTIybmFtZSUyMiUzRVRvdXRlcyUyMG1lcyUyMGV4cGVydGlzZXMlM0MlMkZzcGFuJTNFJTNDJTJGYSUzRSUwQSUzQ2JyJTNFJTBBJTNDYSUyMGNsYXNzJTNEJTIyYnRuLXNraWxsJTIyJTIwaHJlZiUzRCUyMiUyRndlYmRlc2lnbmVyLXByZXN0YXRpb25zJTJGZXhwZXJ0aXNlLXdlYmRlc2lnbiUyRiUyMiUyMGl0ZW1wcm9wJTNEJTIydXJsJTIyJTIwdGl0bGUlM0QlMjJXZWJkZXNpZ24lMjIlM0UlM0NzcGFuJTIwaXRlbXByb3AlM0QlMjJuYW1lJTIyJTNFV2ViZGVzaWduJTNDJTJGc3BhbiUzRSUzQyUyRmElM0UlMEElM0NiciUzRSUwQSUzQ2ElMjBjbGFzcyUzRCUyMmJ0bi1za2lsbCUyMiUyMGhyZWYlM0QlMjIlMkZ3ZWJkZXNpZ25lci1wcmVzdGF0aW9ucyUyRmV4cGVydGlzZS1pbnRlZ3JhdGlvbi1odG1sLWNzcy1qcyUyRiUyMiUyMGl0ZW1wcm9wJTNEJTIydXJsJTIyJTIwdGl0bGUlM0QlMjJJbnQlQzMlQTlncmF0aW9uJTIyJTNFJTNDc3BhbiUyMGl0ZW1wcm9wJTNEJTIybmFtZSUyMiUzRUludCVDMyVBOWdyYXRpb24lMjAlMjhIVE1MJTJDJTIwQ1NTJTJDJTIwSlMlMjklM0MlMkZzcGFuJTNFJTNDJTJGYSUzRSUwQSUzQ2JyJTNFJTBBJTNDYSUyMGNsYXNzJTNEJTIyYnRuLXNraWxsJTIwYnRuLXNraWxsLWFjdGl2ZSUyMiUyMGhyZWYlM0QlMjIlMkZ3ZWJkZXNpZ25lci1wcmVzdGF0aW9ucyUyRmV4cGVydGlzZS11eC1ldC11aSUyRiUyMiUyMGl0ZW1wcm9wJTNEJTIydXJsJTIyJTIwdGl0bGUlM0QlMjJVWCUyMGV0JTIwVUklMjIlM0UlM0NzcGFuJTIwaXRlbXByb3AlM0QlMjJuYW1lJTIyJTNFVVglMjBldCUyMFVJJTNDJTJGc3BhbiUzRSUzQyUyRmElM0UlMEElM0NiciUzRSUwQSUzQ2ElMjBjbGFzcyUzRCUyMmJ0bi1za2lsbCUyMiUyMGhyZWYlM0QlMjIlMkZ3ZWJkZXNpZ25lci1wcmVzdGF0aW9ucyUyRnNpdGUtaW50ZXJuZXQlMkZzaXRlLW1vYmlsZS1yZXNwb25zaXZlLWRlc2lnbiUyRiUyMiUyMGl0ZW1wcm9wJTNEJTIydXJsJTIyJTIwdGl0bGUlM0QlMjJSZXNwb25zaXZlJTIwZGVzaWduJTIyJTNFJTNDc3BhbiUyMGl0ZW1wcm9wJTNEJTIybmFtZSUyMiUzRVJlc3BvbnNpdmUlMjBkZXNpZ24lM0MlMkZzcGFuJTNFJTNDJTJGYSUzRSUwQSUzQ2JyJTNFJTBBJTNDYSUyMGNsYXNzJTNEJTIyYnRuLXNraWxsJTIyJTIwaHJlZiUzRCUyMiUyRndlYmRlc2lnbmVyLXByZXN0YXRpb25zJTJGZXhwZXJ0aXNlLXJlZmVyZW5jZW1lbnQtc2VvJTJGJTIyJTIwaXRlbXByb3AlM0QlMjJ1cmwlMjIlMjB0aXRsZSUzRCUyMlIlQzMlQTlmJUMzJUE5cmVuY2VtZW50JTIyJTNFJTNDc3BhbiUyMGl0ZW1wcm9wJTNEJTIybmFtZSUyMiUzRVIlQzMlQTlmJUMzJUE5cmVuY2VtZW50JTIwbmF0dXJlbCUzQyUyRnNwYW4lM0UlM0MlMkZhJTNFJTBBJTNDYnIlM0UlMEElM0NhJTIwY2xhc3MlM0QlMjJidG4tc2tpbGwlMjIlMjBocmVmJTNEJTIyJTJGd2ViZGVzaWduZXItcHJlc3RhdGlvbnMlMkZleHBlcnRpc2UtY21zJTJGJTIyJTIwaXRlbXByb3AlM0QlMjJ1cmwlMjIlMjB0aXRsZSUzRCUyMkNNUyUyMiUzRSUzQ3NwYW4lMjBpdGVtcHJvcCUzRCUyMm5hbWUlMjIlM0VDTVMlM0MlMkZzcGFuJTNFJTNDJTJGYSUzRQ==[/vc_raw_html][/vc_column][vc_column width= »3/4″ css= ».vc_custom_1530363442320{padding-left: 50px !important;} »][vc_column_text el_class= »texte-expertises » css= ».vc_custom_1534951976833{padding-bottom: 20px !important;} »]

Dans le jargon des métiers de la conception web et du design, on parle souvent, et de plus en plus d’UX et d’UI, ou expérience utilisateur (User eXperience) et interface utilisateur (User Interface), mais à quoi font-ils référence ?

UX – User Experience

User

User = Utilisateur = Humain. A l’instar du « Design Thinking », l’UX se centre sur l’humain comme base de réflexion. C’est donc l’outil qui s’adapte à l’humain et non pas l’inverse.

Expérience

L’expérience implique par définition l’action de faire, et donc d’interagir avec quelqu’un ou quelque chose. Dans nos sociétés modernes, l’expérience fait de plus en plus référence à un sentiment positif, à un apprentissage.

Le mélange des 2 : une combinaison gagnante

L’UX fait donc référence à notre faculté d’interagir naturellement et simplement avec une machine, un site internet ou une application mobile. Ce concept vient donc nous rappeler que nous devons pensons à l’utilisateur final quant à la conception de notre outil.

En pratique

L’UX n’est pas dissociable du web design. C’est pourquoi, tout développement d’outil ou de site web doit toujours s’efforcer de répondre aux besoins de l’utilisateur qui doit être clairement défini en amont. En pratique, je me place toujours du côté de l’utilisateur pour justifier mes choix en termes de design.

Le design doit toujours être pertinent, accessible & cohérent par rapport à une typologie d’utilisateur. Le but ultime est de mettre en confiance l’utilisateur pour l’inciter à interagir avec le site. Pour ce faire, j’optimise l’ergonomie, les chemins d’accès, les couleurs, la lisibilité, la gradation de l’information, la vitesse de chargement, l’accès aux éléments de conversion etc.

 

UI – User Interface

L’UX est un concept assez difficile à expliquer car il trouve sa source dans l’esprit des utilisateurs, c’est une sensation. L’UI, quant à elle est bien tangible et correspond au design statique réalisé par le webdesigner. L’UI est la partie « visible », « perceptible » d’un produit : c’est ce que l’on voit, entend, touche lorsque l’on utilise une application mobile par exemple.

Dans ma procédure, le design UI se découpe en 2 étapes distinctes :

  • Wireframe : une maquette simplifiée de la page d’accueil du site, ou de plusieurs pages si le site est complexe. C’est une base de réflexion pour optimiser le parcours utilisateur.
  • Webdesign : une maquette visuelle terminée prête à être intégrée. (voir mon processus entier)

 

Pour résumer

L’UI est une étape de production comme l’intégration. L’UX quant à elle est un ensemble de notions concernant l’utilisateur que l’on doit avoir en tête dans les différentes étapes de création d’un site internet ou d’une application mobile. En d’autres mots, l’UX et l’UI sont complémentaires pour réaliser un outil web performant.

[/vc_column_text][/vc_column][/vc_row][vc_row bg_type= »grad » bg_override= »ex-full » bg_grad= »background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FBBCB5), color-stop(16%, #E8AAC6), color-stop(30%, #E8AAC6), color-stop(46%, #CEBEDF), color-stop(69%, #99C9EC));background: -moz-linear-gradient(140deg,#FBBCB5 0%,#E8AAC6 16%,#E8AAC6 30%,#CEBEDF 46%,#99C9EC 69%);background: -webkit-linear-gradient(140deg,#FBBCB5 0%,#E8AAC6 16%,#E8AAC6 30%,#CEBEDF 46%,#99C9EC 69%);background: -o-linear-gradient(140deg,#FBBCB5 0%,#E8AAC6 16%,#E8AAC6 30%,#CEBEDF 46%,#99C9EC 69%);background: -ms-linear-gradient(140deg,#FBBCB5 0%,#E8AAC6 16%,#E8AAC6 30%,#CEBEDF 46%,#99C9EC 69%);background: linear-gradient(140deg,#FBBCB5 0%,#E8AAC6 16%,#E8AAC6 30%,#CEBEDF 46%,#99C9EC 69%); » css= ».vc_custom_1529184817069{padding-top: 50px !important;padding-bottom: 50px !important;} »][vc_column][ultimate_heading main_heading= »Besoin d’un site internet ? » heading_tag= »div » main_heading_color= »#ffffff » sub_heading_color= »#ffffff » main_heading_margin= »margin-bottom:20px; » sub_heading_margin= »margin-bottom:10px; » main_heading_font_size= »desktop:45px; » sub_heading_font_size= »desktop:20px; »]Je crée des sites web élégants et efficaces pour répondre à vos objectifs,

délivrer votre message et générer des prospects et de nouvelles affaires.[/ultimate_heading][vc_row_inner][vc_column_inner width= »1/3″][/vc_column_inner][vc_column_inner width= »1/3″ css= ».vc_custom_1529184896244{padding-top: 20px !important;} »][ult_buttons btn_title= »CONTACTEZ-MOI » btn_link= »url:https%3A%2F%2Farounie.fr%2Fdevis-gratuit-webdesigner-freelance-nice%2F||| » btn_align= »ubtn-center » btn_size= »ubtn-block » btn_title_color= »#dab4d5″ btn_bg_color= »#ffffff » btn_anim_effect= »ulta-push » btn_bg_color_hover= »#ffffff » icon= »Defaults-paper-plane-o send-o » icon_size= »32″ icon_color= »#dab4d5″ btn_icon_pos= »ubtn-sep-icon-at-left » btn_font_style= »font-weight:bold; » btn_font_size= »desktop:20px; »][/vc_column_inner][vc_column_inner width= »1/3″][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row]

Travaillons ensemble

Vous appréciez mon savoir-faire et vous souhaitez me confier votre projet ? Contactez-moi pour en discuter.

© 2021  Arounie Webdesign - Créatrice de sites internet freelance