The present study compares some representative cases of software applications designed during classes from the course Ergonomics, Perception and Usability during the 2011 and 2014 academic years. As an innovation, in 2014 narrative techniques were applied during the design process, which resulted in improved differentiation and specialisation of the graphic representations as well as an optimised student work process.
ABSTRACT
KEYWORDS
app, creativity, graphics, interface, storytelling, usabilityThe pr esent study com par es som e r epr esentative cases of
appli cati ons desi gned dur i ng classes fr om the cour se Er gonom i cs, Per cepti on and Usabi li ty dur i ng the 2011 and 2014 academ i c year s. As an i nnovati on, i n 2014 nar r ative techni ques w er e appli ed dur i ng the desi gn pr ocess, w hi ch r esulted i n i m pr oved di ffer enti ati on and speci ali sati on of the gr aphi c r epr esentati ons as w ell an opti m i sed student w or k pr ocess. The vi sual r epr esentati ons der ived fr om the exer ci ses w er e m uch m or e consi stent i n ter m s of the i nter face?s gr aphi c speci fi cati ons, as w ell as m uch m or e fi gur ative. Befor e the exer ci se, i t w as thought that the pr ocess m i ght be detr i m ental to the si te?s usabi li ty, but i t has helped pr om ote a m or e engagi ng user exper i ence and i m pr oved the appli cati ons? r esults.
For the last thr ee year s, I have been an i nstr uctor on the cour se Er gonom i cs, Per cepti on and Usabi li ty, w her e I have been
r esponsi ble for an exer ci se i n w hi ch a softw ar e app i s developed fr om i ts i dea phase all the w ay thr ough to the desi gn of the style m anual, r esulti ng i n a pr oduct r eady to be deliver ed to a
pr ogr am m er for pr oducti on. Thi s pr ocess follow s five phases: (1) the i dea phase; (2) the planni ng phase; (3), the developm ent phase; (4) the testi ng phase; and (5) the fi ni shi ng phase. The pr ocess alw ays begi ns w i th an i ndivi dual cr eative phase, w hi ch i s then com bi ned w i th a gr oup pr ocess i n or der to develop the i dea. To do thi s, an i n-class w or kshop i s or gani sed i n w hi ch each student cr eates a r epr esentati on of hi s or her pr oposal i n the centr e of a sheet of r egular paper, i ncludi ng the nam e of the appli cati on and a dr aft of the i dea. Ever y four m i nutes thi s w or ksheet i s passed on to another student. The new student m ust then r ei nter pr et the or i gi nal i dea or the successive ones and add a pr oposal i n a new box. The i deas m ust
St oryt el l ing appl ied t o app design
El ena Bart omeu Magaña
EINA, Centre Universitari de Disseny i Art. Attached to the UAB. Research Group Design Processes. Advanced Practices in Design & Art.
Storytelling applied to app design
later al thi nki ng.
Thi s i s the i dea phase (1). Next com es the planni ng phase (2), i n w hi ch the students go hom e, sear ch for any exi sti ng apps on the sam e subject avai lable on the m ar ket, and then plan how they w i ll develop thei r ow n: w ho the tar get audi ence i s, w hat the app?s thr ee m ai n functi ons ar e, w hat the gr aphi c benchm ar ks ar e i n the i ndustr y i n w hi ch i t w i ll be used (and w hether or not these ar e goi ng to be follow ed), etc. At thi s poi nt, the student i s explor i ng the context for hi s or her i dea and establi shi ng a base cam p fr om w hi ch all of the upcom i ng activi ti es w i ll be car r i ed out. Thi s ter r i tor y m ust be w ell under stood i n or der to ensur e that w hen the end of the r oad i s r eached, i t i s i n li ne w i th w hat had been i ni ti ally planned. Dur i ng the developm ent phase (3), the student or gani ses the flow of i nfor m ati on, defi nes the ar chi tectur e for the app, and plans a user test. In the testi ng phase (4), a user test i s conducted. Thi s m ust take place i n the classr oom w i th tw o exter nal user s and, as an i ndependent assi gnm ent, agai n w i th tw o exter nal user s. Fi nally, the pr oject r eaches i ts fi ni shi ng phase, i n w hi ch students i ntr oduce changes, fi ne-tune the detai ls and pr epar e a pr esentati on of thei r pr ojects, i ncludi ng r eor gani si ng the i nfor m ati on i n or der to explai n i t clear ly.
Thi s year, although the basi c m ethod w as the sam e, I i ntr oduced a new techni que dur i ng phase 2, the nar r ative. Thi s techni que com es fr om the fi eld of stor ytelli ng. It does not i nvolve telli ng stor i es i n the li ter al sense, but r ather w hen the ter m i s used i n the desi gn envi r onm ent i t r efer s to a techni que that com es fr om the ar ea of nar r ati on - a stor y for the desi gn i s appli ed to i ts developm ent. In our case, w hat w e di d w as m ake connecti ons w i th str ategi c planni ng usi ng a stor y that allow s the
student to captur e a snapshot of the w hole cloud of i nfor m ati on ar ound hi s or her i ni ti al i dea. In thi s w ay, all of the i nfor m ati on com pr i si ng the context that m ust be explor ed i n phase 2 ceases to exi st as a w or ld of possi bi li ti es and becom es soli di fi ed i n the voi ce of the char acter, i n a par ti cular m om ent, i n a need, a desi r e, or an atm ospher e i n other w or ds, i n a ver y speci fi c r epr esentati on of the pr oject?s i m agi nar y. The vi sual r epr esentati ons der ived fr om exer ci ses that have i ncluded thi s techni que have been m uch m or e consi stent i n ter m s of the i nter face?s gr aphi c speci fi cati ons and also m uch m or e fi gur ative.
The UX has also been better, w i th m or e vi sual consi stency and the cr eati on of them ati c atm ospher es or scenar i os w i th per sonali sed voi ces. It gave r i se to centr ali sati on i n the pr ocess of adjusti ng the pr ototypes, r edoi ng fi ni shes based on plans. We have m anaged to br eak aw ay fr om cli chéd tar gets by desi gni ng pr ojects based on ver y speci fi c user s. Stor ytelli ng, w hi ch at fi r st m ay have seem ed li ke som ethi ng that could be detr i m ental to the si te?s usabi li ty, has i nstead helped to foster a m or e engagi ng user exper i ence and has i m pr oved the end appli cati ons.
Stanley el Dr. hipocondríaco and Catycat (2013)
Ex am pl es of sh ar per v oi ce: Stanley el Dr. hipocondríaco, Catycat (2013).
Ther e w as also a char acter i n 2011 (Ayuda a Nacho a estudiar)
Ex am pl es of spat i al m et aph or s w i t h t r an sm ed i a: Flatmate y Expediente X (2013).
Ex am pl es of gr aph i cal con si st en cy i n d i f f er en t d ept h s of t h e app:
Illustr ati obs Scarface (2013) vs. i llustr ati ons Insomnia (2011)
Ex am pl es of d i sr u pt i on b et w een at m osph er e of d epar t u r e an d t h e f i n al r esu l t s: W hat peak is it (r om ance that ends on troquemole). It i s
alw ays easi er to vi suali ze m i sappli ed str ategy.
