{"id":638,"date":"2015-04-07T11:46:49","date_gmt":"2015-04-07T10:46:49","guid":{"rendered":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/?page_id=638"},"modified":"2015-04-07T11:46:49","modified_gmt":"2015-04-07T10:46:49","slug":"crono-ral%c2%b7li","status":"publish","type":"page","link":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/experiencies\/crono-ral%c2%b7li\/","title":{"rendered":"Crono Ral\u00b7li"},"content":{"rendered":"<p><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2014\/02\/Flich-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-142 aligncenter\" alt=\"Flich-1\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2014\/02\/Flich-1-207x300.png\" width=\"207\" height=\"300\" srcset=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2014\/02\/Flich-1-207x300.png 207w, http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2014\/02\/Flich-1-707x1024.png 707w, http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2014\/02\/Flich-1.png 934w\" sizes=\"auto, (max-width: 207px) 100vw, 207px\" \/><\/a><\/p>\n<h1>Introducci\u00f3<\/h1>\n<p>L\u2019assignatura de <strong>Disseny d\u2019Interf\u00edcies Interactives<\/strong> ens proposava el repte de dissenyar una aplicaci\u00f3 interactiva per a m\u00f2bil o tauleta. El punt de partida, la tem\u00e0tica de l\u2019aplicaci\u00f3, era \u201cel temps\u201d. Els alumnes hav\u00edem de treballar tots els passos previs a la programaci\u00f3: conceptualitzaci\u00f3, <em>sketching<\/em> i finalment presentar un prototip navegable en alta definici\u00f3. El resultat final havia de ser el m\u00e9s fidedigne possible i respondre a totes les necessitats que s\u2019havien plantejat en un primer moment.<\/p>\n<p><strong>Proposta:<\/strong> una aplicaci\u00f3 per a cronometrar curses de ral\u00b7lis regionals.<\/p>\n<h1>Etapes i reptes<\/h1>\n<p>La decisi\u00f3 de dissenyar una aplicaci\u00f3 per a cronometrar ral\u00b7lis es va prendre r\u00e0pidament ja que coneixia el funcionament d\u2019aquestes curses a nivell auton\u00f2mic; en molts casos el proc\u00e9s d\u2019enregistrament dels temps \u00e9s bastant artesanal, amb paper i llapis, cosa que pot comportar errades irreparables i requereix bastant temps de dedicaci\u00f3 per a bolcar les dades a un sistema inform\u00e0tic. \u00c9s per tot a\u00e7\u00f2 que es va plantejar si es podia millorar aquest proc\u00e9s amb una aplicaci\u00f3 que enregistraria directament els temps i permetria veure l\u2019evoluci\u00f3 de les curses en temps real.<\/p>\n<h3>Reptes:<\/h3>\n<ul>\n<li>Dissenyar una aplicaci\u00f3 que permeta satisfer una necessitat, en aquest cas fer m\u00e9s eficient el proc\u00e9s d\u2019enregistrament dels temps a les curses auton\u00f2miques de ral\u00b7lis.<\/li>\n<li>Crear una interf\u00edcie que resulte agradable i f\u00e0cil d\u2019utilitzar.<\/li>\n<li>Dissenyar tots els elements de la interf\u00edcie perqu\u00e8 el resultat final s\u2019aproxime el m\u00e0xim possible a una aplicaci\u00f3 real de tauleta amb el sistema operatiu iOS 7.<\/li>\n<\/ul>\n<h3>Etapes:<\/h3>\n<p><strong>1.- Conceptualitzaci\u00f3<\/strong><\/p>\n<p>En aquesta primera etapa calia definir el p\u00fablic potencial de l\u2018aplicaci\u00f3. Aquest primer pas t\u00e9 molta import\u00e0ncia ja que els usuaris potencials i els contextos en els que puguen fer \u00fas de l\u2019app condicionen, no sols el propi disseny, sin\u00f3 tamb\u00e9 les funcions que ha de tenir.<\/p>\n<p><strong>2.- Arbre de navegaci\u00f3 i <em>sketching<\/em><\/strong><\/p>\n<p>Al segon pas comen\u00e7\u00e0vem a veure quin era l\u2019aspecte visual de la nostra aplicaci\u00f3. Primerament decidint quantes pantalles tindria, despr\u00e9s establint les interaccions entre aquestes i finalment, dissenyant les mateixes pantalles, primer a m\u00e0 i seguidament amb eines de prototipatge en baixa definici\u00f3.<\/p>\n<p><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2014\/02\/Flich-0.Sketching.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-141\" alt=\"Flich-0.Sketching\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2014\/02\/Flich-0.Sketching-300x148.png\" width=\"300\" height=\"148\" srcset=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2014\/02\/Flich-0.Sketching-300x148.png 300w, http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2014\/02\/Flich-0.Sketching.png 812w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>En aquesta etapa comen\u00e7a a albirar-se com funcionar\u00e0 la interf\u00edcie i \u00e9s habitual que acaben produint-se modificacions respecte a les pretensions inicials. Aix\u00ed mateix, la creaci\u00f3 de dos prototips tamb\u00e9 ajuda a repensar l\u2019utilitat de les funcions i a buscar alternatives per a presentar la informaci\u00f3 de la forma m\u00e9s atractiva i eficient, tenint en compte que l\u2019usuari ha d\u2019aconseguir una navegaci\u00f3 fluida passant per un proc\u00e9s d\u2019aprenentatge el m\u00e9s curt possible.<\/p>\n<p><strong>3.- Prototip interactiu en alta definici\u00f3<\/strong><\/p>\n<p>Finalment, utilitzant eines de prototipatge (<em>Justinmind<\/em>) i programes d\u2019edici\u00f3 com <em>Photoshop<\/em> i <em>Illustrator<\/em>, es crea un prototip navegable en alta definici\u00f3 (<a href=\"https:\/\/www.justinmind.com\/usernote\/tests\/11543387\/11543894\/11543896\/index.html\" target=\"_blank\">enlla\u00e7 al prototip<\/a>). En aquesta etapa s\u2019acaba utilitzant l\u2019app i comprovant el seu funcionament. Novament es produeixen alguns canvis, en el nostre cas van afectar a la mateixa estructura ja que, per exemple, el disseny del men\u00fa no era l\u2019idoni.<\/p>\n<div id='gallery-1' class='gallery galleryid-638 gallery-columns-3 gallery-size-thumbnail'><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a href='http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2014\/02\/Flich-2.png'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2014\/02\/Flich-2-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" sizes=\"auto, (max-width: 34.9rem) calc(100vw - 2rem), (max-width: 53rem) calc(8 * (100vw \/ 12)), (min-width: 53rem) calc(6 * (100vw \/ 12)), 100vw\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a href='http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2014\/02\/Flich-3.png'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2014\/02\/Flich-3-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" sizes=\"auto, (max-width: 34.9rem) calc(100vw - 2rem), (max-width: 53rem) calc(8 * (100vw \/ 12)), (min-width: 53rem) calc(6 * (100vw \/ 12)), 100vw\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a href='http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2014\/02\/Flich-4.png'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2014\/02\/Flich-4-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" sizes=\"auto, (max-width: 34.9rem) calc(100vw - 2rem), (max-width: 53rem) calc(8 * (100vw \/ 12)), (min-width: 53rem) calc(6 * (100vw \/ 12)), 100vw\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a href='http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2014\/02\/Flich-5.png'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2014\/02\/Flich-5-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" sizes=\"auto, (max-width: 34.9rem) calc(100vw - 2rem), (max-width: 53rem) calc(8 * (100vw \/ 12)), (min-width: 53rem) calc(6 * (100vw \/ 12)), 100vw\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a href='http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2014\/02\/Flich-6.png'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2014\/02\/Flich-6-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" sizes=\"auto, (max-width: 34.9rem) calc(100vw - 2rem), (max-width: 53rem) calc(8 * (100vw \/ 12)), (min-width: 53rem) calc(6 * (100vw \/ 12)), 100vw\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a href='http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2014\/02\/Flich-7.png'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2014\/02\/Flich-7-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" sizes=\"auto, (max-width: 34.9rem) calc(100vw - 2rem), (max-width: 53rem) calc(8 * (100vw \/ 12)), (min-width: 53rem) calc(6 * (100vw \/ 12)), 100vw\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a href='http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2014\/02\/Flich-8.png'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2014\/02\/Flich-8-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" sizes=\"auto, (max-width: 34.9rem) calc(100vw - 2rem), (max-width: 53rem) calc(8 * (100vw \/ 12)), (min-width: 53rem) calc(6 * (100vw \/ 12)), 100vw\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a href='http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2014\/02\/Flich-9.png'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2014\/02\/Flich-9-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" sizes=\"auto, (max-width: 34.9rem) calc(100vw - 2rem), (max-width: 53rem) calc(8 * (100vw \/ 12)), (min-width: 53rem) calc(6 * (100vw \/ 12)), 100vw\" \/><\/a>\n\t\t\t<\/div><\/figure>\n\t\t<\/div>\n\n<p><a href=\"https:\/\/www.justinmind.com\/usernote\/tests\/11543387\/11543894\/11543896\/index.html\" target=\"_blank\">Enlla\u00e7 al prototip interactiu<\/a><\/p>\n<h1>Conclusions<\/h1>\n<p>Un cop finalitzat el treball queda pal\u00e8s que el disseny d\u2019una interf\u00edcie interactiva \u00e9s un proc\u00e9s que est\u00e0 en continua evoluci\u00f3 i totes les assumpcions que es fan en les etapes inicials s\u00f3n susceptibles de canviar a mesura que et submergeixes en el disseny. Ara b\u00e9, tant important \u00e9s una bona definici\u00f3 dels usuaris potencials per a establir les funcions que ha de tenir l\u2019aplicaci\u00f3 com un bon acabat, cuidant l\u2019est\u00e8tica i la manera en que es presenta la informaci\u00f3.<\/p>\n<h1>Documentaci\u00f3<\/h1>\n<p>Gil, E.A., De Lera, E., i Monjo, A. (2010). <em>Usuaris i sistemes interactius<\/em>. Barcelona. FUOC.<\/p>\n<p>Monjo, A. (2011).<em> Disseny web i d&#8217;interf\u00edcies multim\u00e8dia<\/em>. Barcelona. FUOC.<\/p>\n<p>Flamarich, J. (2013). <em>Disseny d&#8217;interf\u00edcies per a dispositius m\u00f2bils<\/em>. Barcelona. FUOC.<\/p>\n<p>Almirall, J. (2013). <em>Disseny centrat en l&#8217;usuari de dispositius m\u00f2bils<\/em>. Barcelona. FUOC<\/p>\n<p>Sharp, Helen; Rogers, Yvonne and Preece, Jenny (2011). <em>Interaction design: beyond human-computer interaction<\/em>. 3a ed. UK: John Wiley &amp; Sons Ltd.<\/p>\n<h1>Sobre l&#8217;autor<\/h1>\n<p><strong>Juan Flich<\/strong><br \/>\nLlicenciat en Comunicaci\u00f3 Audiovisual. Actualment estudiant del Postgrau de Disseny web: usuaris, interf\u00edcies i m\u00f2bils.<\/p>","protected":false},"excerpt":{"rendered":"<p>Introducci\u00f3 L\u2019assignatura de Disseny d\u2019Interf\u00edcies Interactives ens proposava el repte de dissenyar una aplicaci\u00f3 interactiva per a m\u00f2bil o tauleta. El punt de partida, la tem\u00e0tica de l\u2019aplicaci\u00f3, era \u201cel temps\u201d. Els alumnes hav\u00edem de treballar tots els passos previs a la programaci\u00f3: conceptualitzaci\u00f3, sketching i finalment presentar un prototip navegable en alta definici\u00f3. El &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/experiencies\/crono-ral%c2%b7li\/\" class=\"more-link\">Continua llegint <span class=\"screen-reader-text\">\u00abCrono Ral\u00b7li\u00bb<\/span><\/a><\/p>\n","protected":false},"author":65,"featured_media":0,"parent":7,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"plantilla-pagina.php","meta":{"footnotes":""},"tags":[],"class_list":["post-638","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/pages\/638","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/comments?post=638"}],"version-history":[{"count":1,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/pages\/638\/revisions"}],"predecessor-version":[{"id":639,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/pages\/638\/revisions\/639"}],"up":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/pages\/7"}],"wp:attachment":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/media?parent=638"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/tags?post=638"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}