Ceskˇ e´ vysoke´ ucenˇ ´ı technicke´ v Praze Fakulta elektrotechnicka´ Katedra pocˇ´ıtacovˇ e´ grafiky a interakce Diplomov´apr´ace N´avrhuˇzivatelsk´ehorozhran´ı pro dotykovou odpov´ıdac´ıjednotku k interkomu Bc. Kateˇrina Koutov´a Vedouc´ıpr´ace:Ing. Marek Rub´aˇs,2N Telekomunikace a.s. Studijn´ıprogram: Otevˇren´ainformatika Obor: Interakce ˇclovˇekas poˇc´ıtaˇcem 23. kvˇetna2019 Podˇekov´an´ı V prvn´ıˇradˇedˇekujisv´emu vedouc´ımu Ing. Marku Rub´aˇsovi za odborn´eveden´ı cel´epr´acea cel´espoleˇcnosti2N Telekomunikace a.s. za poskytnut´ımateri´al˚u a produkt˚u.D´aledˇekuji vˇsem participant˚um,kteˇr´ı se z´uˇcastnilipr˚uzkumu a uˇzivatelsk´ehotestov´an´ı,za jejich ˇcasa cenn´epoznatky, d´ıkynimˇzje v´ysledn´y prototyp uˇzivatelsky pˇr´ıvˇetivˇejˇs´ı.V posledn´ıˇradˇechci podˇekovat takt´eˇzrodinˇe a pˇr´atel˚umza podporu bˇehemcel´ehostudia. Prohl´aˇsen´ı Prohlaˇsuji,ˇzejsem pˇredloˇzenoupr´acivypracoval(a) samostatnˇea ˇzejsem uvedl(a) veˇsker´epouˇzit´einformaˇcn´ızdroje v souladu s Metodick´ympokynem o etick´epˇr´ıpravˇevysokoˇskolsk´ych z´avˇereˇcn´ych prac´ı. V Praze dne 23. kvˇetna2019 . Cesk´evysok´euˇcen´ıtechnick´evˇ Praze Fakulta elektrotechnick´a c 2019 KateˇrinaKoutov´a.Vˇsechna pr´ava vyhrazena. Tato pr´ace vznikla jako ˇskoln´ı d´ılo na Cesk´emvysok´emuˇcen´ıˇ technick´em v Praze, Fakultˇeelektrotechnick´e.Pr´ace je chr´anˇenapr´avn´ımipˇredpisy a me- zin´arodn´ımi ´umluvamio pr´avuautorsk´ema pr´avech souvisej´ıc´ıchs pr´avemau- torsk´ym.K jej´ımuuˇzit´ı,s v´yjimkoubez´uplatn´ychz´akonn´ychlicenc´ıa nad r´amec opr´avnˇen´ıuveden´ychv Prohl´aˇsen´ına pˇredchoz´ıstranˇe,je nezbytn´ysouhlas au- tora. Odkaz na tuto pr´aci Koutov´a,Kateˇrina. N´avrhuˇzivatelsk´ehorozhran´ıpro dotykovou odpov´ıdac´ıjed- notku k interkomu. Diplomov´apr´ace. Praha: Cesk´evysok´euˇcen´ıˇ technick´e v Praze, Fakulta elektrotechnick´a,2019. Abstrakt Tato pr´acese vˇenuje n´avrhu uˇzivatelsk´eho rozhran´ıpro odpov´ıdac´ıjednotku k interkomu. N´avrhbyl zaloˇzen na reˇserˇsipodobn´ych zaˇr´ızen´ıtohoto typu, vˇcetnˇepr˚uzkumu mezi souˇcasn´ymia potencion´aln´ımiuˇzivateli, a na z´akladˇe studia problematiky UX designu vˇenuj´ıc´ıse tak´etvorbˇeuˇzivatelsk´ych rozhran´ı zamˇeˇren´ena c´ıleuˇzivatel˚u.Uˇzivatel´ebyli zastoupeni v procesu n´avrhu nepˇr´ımo pomoc´ıperson i pˇr´ımojako ´uˇcastn´ıcitestov´an´ısamotn´ehoprototypu. Cel´y proces n´avrhu prob´ıhalve dvou f´az´ıch, obˇebyly zakonˇceny uˇzivatelsk´ymtes- tov´an´ıma n´aslednou´upravou prototypu podle nalezen´ych probl´em˚u.Fin´aln´ı prototyp je pro problematiky neznal´euˇzivatele t´emˇeˇrk nerozpozn´an´ıod re´al- n´ehoproduktu. Kl´ıˇcov´a slova uˇzivatelsk´erozhran´ı,pouˇzitelnost, interkom, odpov´ıdac´ıjed- notka Abstract The thesis deals with the user interface design for an intercom answering unit. The design was based on a research of similar devices, including a research of current and potential users, and study of UX design problems also dealing with user interface design based on user goals. Users were involved in the whole vii design process indirectly as personas and also directly as participants of user testing. The design process was divided into two stages, each ending with user testing and modification of the prototype according to discovered problems. The final prototype is almost indistinguishable from the actual product for an amateur user. Keywords user interface, usability, intercom, answering unit viii Obsah Uvod´ 1 1 Principy n´avrhu uˇzivatelskych´ rozhran´ı u dotykovych´ zaˇr´ızen´ı 3 1.1 Tvorba uˇzivatelsk´ych rozhran´ızamˇeˇren´ana c´ıleuˇzivatele . 3 1.2 Interakˇcn´ıdesign . 10 1.3 Vizu´aln´ıdesign . 13 1.4 Lidsk´emyˇslen´ıv pr´acis poˇc´ıtaˇcem . 16 1.5 Uˇzivatelsk´ypr˚uzkum. 21 1.6 Testov´an´ıuˇzivatelsk´ehorozhran´ı . 23 2 Analyza´ souˇcasnych´ ˇreˇsen´ı 25 2.1 Historie telekomunikaˇcn´ıch syst´em˚u . 25 2.2 Odpov´ıdac´ıjednotky k interkomu od 2N . 26 2.3 Odpov´ıdac´ıjednotky s dotykov´ymidispleji od jin´ych v´yrobc˚u. 32 2.4 Shrnut´ıreˇserˇse . 35 3 N´avrh Lo-Fi prototypu 37 3.1 Pˇr´ıprava . 37 3.2 Vytv´aˇren´ıLo-Fi prototypu . 48 3.3 Testov´an´ıLo-Fi prototypu . 48 4 N´avrh Hi-Fi prototypu 61 4.1 Anal´yzaprototypovac´ıch n´astroj˚u. 61 4.2 Zvolen´yprototypovac´ın´astroj . 63 4.3 Vytv´aˇren´ıprototypu . 64 4.4 Testov´an´ıHi-Fi prototypu . 67 Z´avˇer 79 Literatura 81 ix A Seznam pouˇzitych´ zkratek 85 B Obsah pˇriloˇzen´eho CD 87 x Seznam obr´azk˚u 1.1 Vztah mezi koncepˇcn´ımi modely designera, uˇzivatele a obrazem syst´emu[1] (pˇreklada ´uprava vlastn´ı). 18 1.2 Sedm f´az´ıakce[1]. 19 1.3 Iterativn´ıcyklus vytv´aˇren´ıprototypu [1] (pˇreklada ´uprava vlastn´ı). 20 2.1 Indoor Talk[2] . 27 2.2 Aplikace pro chytr´etelefony - Mobile Video[2] . 29 2.3 Uˇzivatelsk´etestov´an´ı- Mobile Video[3] . 29 2.4 Indoor Touch[2] . 31 2.5 Infinite Play Next 700[4] . 34 2.6 Dnake 902M-S2 Indoor Monitor[5] . 35 3.1 Pˇr´ıbˇehke sc´en´aˇri1 - Hlavn´ısc´en´aˇr . 47 3.2 Seznam hovor˚u- verze B . 50 3.3 Deaktivace rodiˇcovsk´ehoz´amku- verze B . 51 3.4 Pˇr´ıchoz´ıhovor - verze B . 52 4.1 Logo Qt[6] . 63 4.2 Reˇzimsp´anku. 64 4.3 Zad´av´an´ıPIN k´odu . 64 4.4 Domovsk´aobrazovka . 65 4.5 Seznam hovor˚u. 65 4.6 Seznam zaˇr´ızen´ı. 65 4.7 Pohled kamery . 65 4.8 Nastaven´ı . 66 4.9 Nastaven´ıdispleje . 66 4.10 Nastaven´ızvuku - editace noˇcn´ıhoreˇzimu . 76 4.11 Nastaven´ızvuku - editace telefonn´ıhoˇc´ısla. 76 xi Uvod´ Nejzn´amˇejˇs´ıpodoba odpov´ıdac´ıjednotky ke dveˇrn´ımu zvonku, kter´ase nach´az´ı t´emˇeˇrve vˇsech starˇs´ıch bytov´ych domech, je klasick´esluch´atko s tlaˇc´ıtkem pro otevˇren´ıvchodov´ych dveˇr´ı.Doba vˇsak pokroˇcilaa dnes se pomalu st´av´astan- dardem chytr´adom´acnost,kde takov´esluch´atko jiˇzp˚usob´ızastarale. Novˇein- stalovan´eodpov´ıdac´ıjednotky jiˇznepln´ıjen funkci otev´ır´an´ıdveˇr´ı,ale umoˇzˇnuj´ı obyvatel˚umnapˇr´ıkladn´ahledna venkovn´ıkamery, aniˇzby na nˇenˇekdozazvo- nil. Pln´ıtak svou funkci tak´ez hlediska bezpeˇcnosti,kdy uloˇzen´efotografie z kamer mohou v pˇr´ıpadˇepotˇreby poslouˇzitpolicii. C´ımv´ıcefunkc´ıtakov´ezaˇr´ızen´ım´a,t´ımv´ıced˚urazuˇ je tˇrebakl´astna uˇzi- vatelskou pˇr´ıvˇetivost. Zaˇr´ızen´ımus´ıb´ytsnadno pouˇziteln´enejen pro jeho ma- jitele, ale mˇeliby ho na z´akladn´ı´urovni zvl´adnoutovl´adati n´avˇstˇevy, kter´ym je byt ˇcid˚umdoˇcasnˇeprop˚ujˇcen. Ve firmˇe2N Telekomunikace a.s., kde pracuji, se zab´yv´amei v´yvojem odpov´ıdac´ıch jednotek, abychom mohli uˇzivatel˚um dodat kompletn´ıˇreˇsen´ı. St´avaj´ıc´ıodpov´ıdac´ıjednotka s dotykov´ymdisplejem sice disponuje velk´ym mnoˇzstv´ımfunkc´ı,ale uˇzivatel˚umpˇrijdejej´ıovl´ad´an´ıneintuitivn´ıa vˇetˇs´ıˇc´ast nab´ızen´ych aplikac´ıtak nevyuˇz´ıvaj´ı.Kdyˇzbyl ned´avnootevˇrenprojekt na no- vou generaci odpov´ıdac´ıch jednotek s dotykov´ymdisplejem, rozhodla jsem se n´avrhprototypu zpracovat jako svou diplomovou pr´aci. Za c´ıljsem si stanovila pˇredevˇs´ımuˇzivatelsk´eprostˇred´ızjednoduˇsita v´ıce pˇribl´ıˇzit potˇreb´amkoncov´eho uˇzivatele. Jelikoˇz naˇse znalost uˇzivatelsk´ych potˇrebnen´ıdostateˇcn´a,bude potˇrebaprov´estuˇzivatelsk´ypr˚uzkum.N´aslednˇe bude potˇrebaprov´estanal´yzukonkurenˇcn´ıch produkt˚u,kter´aposlouˇz´ıjako dalˇs´ıvstup pro vytvoˇren´ı Low-Fidelity1 (zkr´acenˇeLo-Fi) prototypu. Vytvoˇren´y prototyp bude dle potˇreby podroben uˇzivatelsk´ymtest˚um,abych ovˇeˇrilajeho pouˇzitelnost. V´ystupem pr´acebude High-Fidelity2 (zkr´acenˇeHi-Fi) prototyp, kter´ybude 1Jedn´ase o jednoduch´ykoncept uˇzivatelsk´ehorozhran´ı. 2Interaktivn´ıprototyp, kter´yse sv´ymvzhledem i chov´an´ımbl´ıˇz´ıfin´aln´ımu produktu. 1 Uvod´ simulovat funkci odpov´ıdac´ıjednotky. Prototyp mus´ıb´ytvytvoˇrenn´astrojem, kter´yumoˇzn´ıimplementaci vˇetˇsiny funkc´ı,aby ˇselsnadno otestovat a uˇzivatel´e pˇritommˇelipocit, ˇzeinteraguj´ıse skuteˇcn´ymproduktem. Fin´aln´ıHi-Fi pro- totyp spolu s popisem jednotliv´ych funkc´ınavrhovan´edotykov´eodpov´ıdac´ı jednotky bude pouˇziteln´yjako vstup pro anal´yzyv r´amcin´asledn´ehov´yvoje. 2 Kapitola 1 Principy n´avrhuuˇzivatelsk´ych rozhran´ıu dotykov´ychzaˇr´ızen´ı Jeˇstˇeneˇzse pust´ımedo pˇr´ıpravy a n´avrhu samotn´ehoprototypu, pojd’me si proj´ıtz´akladn´ıpravidla, kter´ymibychom se mˇelipˇrinavrhov´an´ıuˇzivatelsk´ych rozhran´ıˇr´ıdit. 1.1 Tvorba uˇzivatelsk´ych rozhran´ızamˇeˇren´a na c´ıleuˇzivatele Uˇzivatel zapoˇcneinterakci s produktem, aby dos´ahlnˇejak´ehoc´ıle, kter´ysi pˇredemstanov´ı.K dosaˇzen´ıc´ıle mu pom˚uˇzeuˇzivatelsk´erozhran´ıproduktu. Bude-li uˇzivatelsk´erozhran´ınavrˇzenotak, aby uˇzivatel dos´ahlsnad- no c´ıle,bude ˇstastn´ya spokojen´y[10]. Ot´azkou je, proˇcje st´alevˇetˇsinaprodukt˚usloˇzit´ana pouˇz´ıv´an´ı a nedˇelaj´ı uˇzivatele ˇst’astn´ym?Probl´emje pr´avˇenejˇcastˇejiv uˇzivatelsk´em rozhran´ı,jehoˇz n´avrhbyl opomenut jako nepodstatn´asouˇc´astv´yvoje produktu. N´avrhdesignu zamˇeˇren´ehona ˇclovˇekazahrnuje pochopen´ıtuˇzeb,potˇreb a motivac´ıpotencion´aln´ıhouˇzivatele. Je nutn´esi uvˇedomovat obchodn´ıa tech- nick´ev´yzvya jin´eomezen´ı,aby byly vytvoˇren´eprodukty svou formou, obsa- hem a chov´an´ımpouˇziteln´ea uˇziteˇcn´e. 1.1.1 Optimalizace pro pokroˇcil´e Aˇckoliv kaˇzd´enov´ezaˇr´ızen´ıpro vˇetˇsinu z n´asznamen´ap´ardn´ıuˇcen´ıpr´ace s n´ım, uˇzivatel´enemaj´ı r´adi,kdyˇzse s nimi zach´az´ı jako se zaˇc´ateˇcn´ıky. Uˇzivatel´enez˚ust´avaj´ı zaˇc´ateˇcn´ıky dlouho a takt´eˇzdlouho trv´a,neˇzse sta- nou experty. Nejv´ıce ˇcasutedy str´av´ı ve f´azipokroˇcil´ych, proto je nejlepˇs´ı 3 1. Principy navrhu´ uˇzivatelskych´ rozhran´ı u dotykovych´ zarˇ´ızen´ı navrhovat rozhran´ıpˇrev´aˇznˇepro tuto skupinu uˇzivatel˚u.Pˇrestoje nutn´emys- let i na zaˇc´ateˇcn´ıkya experty, protoˇzeve f´azizaˇc´ateˇcn´ık˚use nach´az´ınˇejak´y ˇcaskaˇzd´ya experti by nebyli se zaˇr´ızen´ımspokojen´ı,kdyby nenab´ızelov´ıce moˇznost´ıpro nˇe.[10] 1.1.2 Design zamˇeˇren´yna aktivity C´ılje pˇredpoklad koncov´epodm´ınky, zat´ımcoaktivity a ´ukoly jsou pr˚ubˇeˇz- n´ekroky, kter´epom´ahaj´ık dosaˇzen´ıc´ıle.Norman takto definoval hierarchii designu zamˇeˇren´ehona aktivity (Activity Centered Design - d´alejen ACD).