Upgrade to Pro — share decks privately, control downloads, hide ads and more …

数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用...

数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"

ボタンやリンクなどのUI要素が小さいと操作しづらいですが、操作性を定量的に検討できないのがデザイナーにとって悩ましいポイントでした。我々の開発したツール群「Tappy」を使うと、UI要素の大きさに基づいてタップ成功率を高精度に推定でき、リンクが小さすぎる箇所や、不必要に画面を占有しすぎているボタンなどを特定できます。このトークでは以下の内容を含みます。
・Tappyの使い方
・Tappyの活用事例
・タップ成功率の計算方法の理論的背景

More Decks by LINEヤフーTech (LY Corporation Tech)

Other Decks in Design

Transcript

  1. %JGGJDVMUZJOEFUFDUJOH6*TUISPVHI$7 &YBNQMFTXIFSFDPNQVUFSWJTJPOUFDIOJRVFTDBOOPUEJTUJOHVJTIUBQQBCMFBSFBT )ZQFSMJOL )ZQFSMJOL )ZQFSMJOL )ZQFSMJOL )ZQFSMJOL )ZQFSMJOL )ZQFSMJOL )ZQFSMJOL

    )ZQFSMJOL )ZQFSMJOL )ZQFSMJOL )ZQFSMJOL 'SPNBQQFBSBODFBMPOF JUJTEJGGJDVMUUPEFUFSNJOFFYBDUMZ XIJDIBSFBTBSFUBQQBCMF 0OMZUIFUFYUJUTFMGJTUBQQBCMF 5IFBSFBBSPVOEUIFUFYU JTBMTPUBQQBCMF 5IFUBQQBCMFSFHJPODIBOHFTEFQFOEJOH POUIFQMBDFNFOUPGTVSSPVOEJOHMJOLT 
  2. 3FMBUFESFTFBSDIPOUBSHFUQPJOUJOH 7BSJBCJMJUZPGUBQQFEQPJOUT "JNFEQPTJUJPO 'JUUT`MBX <'JUUT > 1SFEJDUUBQUJNF𝑇 𝑇 = 𝑎

    + 𝑏 log! 𝐷 𝑊 + 1 4DINJEU`TMBX <4DINJEU > 1SFEJDUUBQQPJOUWBSJBCJMJUZ𝜎 𝜎 = 𝑎 + 𝑏 𝐷 𝑇 &SSPSSBUFNPEFM <8PCCSPDL > 𝐸𝑅 = 1 − erf 2.066 𝑊 𝐷 2 "!#$ % − 1 2 
  3. $MJDLDPPSEJOBUFTGPMMPXBOPSNBMEJTUSJCVUJPO 7BSJBODF𝜎!DBOCFFTUJNBUFECBTFEPOUIFTJ[F𝑊 𝜎! = 𝑎 + 𝑏𝑊! 1SPCBCJMJUZUIBUBDMJDLGBMMTXJUIJOUIFUBSHFUJT𝑆𝑅 = 𝑃

    − " ! ≤ 𝑋 ≤ " ! = erf " ! !# 5IFPSFUJDBMCBDLHSPVOEPG5BQQZ 3FMBUJPOTIJQCFUXFFOUBSHFUTJ[F8BOEDMJDLDPPSEJOBUFWBSJBODFМ<#J 6*45> %JTUBODF𝐷 4J[F𝑊 4VDDFTT &SSPS &SSPS 𝑥! 𝑥" 'SFRVFODZ 𝜎! [mm!] 𝑊! [mm!] Z Y 3 
  4. VTFSTUBQQFEWBSJPVTCVUUPOTUJNFT  UBQT <:BNBOBLB *44> 'PSFMMJQUJDBMUBSHFUT UIFIJUBSFBJTDBMDVMBUFEVTJOHUIFCPVOEJOHSFDUBOHMF 5BQDPPSEJOBUFTBSFOPSNBMMZEJTUSJCVUFEFWFOGPSSFDUBOHVMBSUBSHFUT<6TVCB *44> .PWFNFOUEJTUBODFIBTMJUUMFFGGFDUPOUIFWBSJBODFPGUBQQPJOUT<:BNBOBLB

    *44> .PEFMBOEEBUBVTFEGPS5BQQZ 𝑋~𝑁(𝜇! , 𝜎! ") 𝑌~𝑁(𝜇# , 𝜎# ") 𝑃 𝑆 = / $ 1 2𝜋𝜎% exp − 𝑥" 2𝜎% " 1 2𝜋𝜎& exp − 𝑦" 2𝜎& " 𝑑𝑥𝑑𝑦 8 ) 𝑅 = 𝑥, 𝑦 | − 𝑊 2 ≤ 𝑥 ≤ 𝑊 2 , − 𝐻 2 ≤ 𝑦 ≤ 𝐻 2 𝜎% " = 𝑎 + 𝑏𝑊" 𝜎& " = 𝑐 + 𝑑𝐻" 
  5. *UJTPGUFOTUBUFEUIBUNPEFMTGPSFTUJNBUJOHTVDDFTTSBUFTDBOTVQQPSUEFTJHOFST • lPVSXPSLBMTPQSPWJEFTUIFGPMMPXJOHJOTJHIUTGPSJOUFSGBDF EFTJHOJOWPMWJOHQPJOUJOHBUNPWJOH UBSHFUTz<;IBOH $)*> • lPVSNPEFMDBOIFMQJNQSPWFJOUFSGBDFEFTJHOJOSFBMXPSMEBQQMJDBUJPOTTVDIBT73 BQQMJDBUJPOTBOEHBNFTz<)VBOH $)*>

    • lJUDBOCFVTFECZ6*EFTJHOFSTJOEFTJHOJOHBOEFWBMVBUJOHUPVDITDSFFOVTFSJOUFSGBDFTz <.B 6*45> )PXFWFS UIFSFXFSFOPTUVEJFTFYBNJOJOHXIFUIFSTVDINPEFMTBSFBDUVBMMZVTFGVMJOUIF6*EFTJHO XPSLPGQSPGFTTJPOBMEFTJHOFSTBOEFOHJOFFST *OPVSSFTFBSDI XFDPOEVDUFEJOUFSOBMJOUFSWJFXTXJUIVTFSTPGUIFXFCBQQWFSTJPOPG5BQQZ $MBJNTGPSNPEFMTJOQSFWJPVTTUVEJFT 
  6. 63-TBOBMZ[FE   6OJRVFVTFST    6OJRVF63-T  

    5PUBMOVNCFSPGBOBMZTFTTIPXO JOUIJTGJHVSFJT 0WFSPGUIFSFNBJOJOH63-T XFSFBOBMZ[FEUJNFT 6TBHFTUBUVTPG5BQQZXFCBQQ 'JSTUUISFFNPOUITBGUFSUIFQVCMJDSFMFBTF +BOVBSZ r"QSJM  63-TBOBMZ[FEPSNPSFUJNFT 
  7. "NPOHUIFTNBSUQIPOFNPEFMTVTFEGPSBOBMZTJT UIPTFTFMFDUFEUJNFTPSNPSF 5IFEFGBVMUTFUUJOH J1IPOF XBTUIFNPTU GSFRVFOUMZDIPTFO 5IFSFXFSFBMTPNBOZBOBMZTFTDPOEVDUFEVTJOH NVDIPMEFSNPEFMT  FH

    J1IPOF XIJDIJTPWFSZFBSTPME 6TBHFTUBUVTPGUIF5BQQZXFCBQQ 'JSTUUISFFNPOUITBGUFSUIFQVCMJDSFMFBTF +BOVBSZ r"QSJM  
  8. 8FBSFDPNQFUJOHXJUIPUIFSNFEJBGPSVTFST`UJNF &H EVSJOHNJOPGEBJMZJOUFSOFUVTF VTFSTTQFOEQBSUPGUIBUUJNFPO-:$PSQPSBUJPOTFSWJDFT #ZQSPWJEJOHDPNGPSUBCMFTFSWJDFTBOEBQQT FH GFXPQFSBUJPOFSSPST  • 6TFS`TQFSTQFDUJWF

    8BTUFEUJNFEVSJOHJOUFSOFUVTFDBOCFSFEVDFE • 1SPWJEFS`TQFSTQFDUJWF 6TFSTBSFNPSFMJLFMZUPDPOUJOVFVTJOHUIFJSTFSWJDFT 8IZDPOEVDU6*SFTFBSDIBU-:$PSQPSBUJPO 6TFSGSJFOEMZ6*TBSFJNQPSUBOUGPSCPUIVTFSTBOETFSWJDFQSPWJEFST $JUFEGSPN IUUQTXXXTPVNVHPKQNBJO@DPO UFOUQEG 57WJFXNJO *OUFSOFUVTBHFNJO BTPG 
  9. 6TFSTEJTMJLFXFCTFSWJDFTUIBUXBTUFUIFJSUJNF • *GBXFCQBHFMPBETXJUIJOTFD POMZPGVTFSTMFBWF • *GMPBEJOHUBLFTTFD UIFESPQPVUSBUFJODSFBTFTUP 5BQQZEFWFMPQNFOUUFBN`TQFSTQFDUJWF • *OBEEJUJPOUPOFUXPSLSFTFBSDIEFWFMPQNFOU

    JNQSPWJOH6*EFTJHODBOBMTPQSPWJEFDPNGPSUBCMFTFSWJDFTBOESFEVDFXBTUFEUJNF %FWFMPQNFOUGPSDPNGPSUBCMFTFSWJDFT $JUFEGSPNl%PFT1BHF-PBE5JNF3FBMMZ"GGFDU#PVODF 3BUF 1JOHEPN3PZBMz 1JOHEPN   IUUQTXXXQJOHEPNDPNCMPHQBHFMPBEUJNFSFBMMZ BGGFDUCPVODFSBUF 
  10. 4MJHIUMZPMEFSEBUB ':2GJOBODJBMSFTVMUT NJOQFSVTFSQFSEBZ • /VNCFSPGNPOUIMZMPHHFEJOVTFS*%TNJMMJPO • 5PUBMVTBHFUJNFCZMPHHFEJOVTFST TNBSUQIPOF 1$ CJMMJPOIPVST

    *GFSSPSDMJDLTPDDVSEVSJOHNJO dTFDPGFYUSBXPSLJTOFFEFE dPGUPUBMUJNF  ✘*ODPOWFOJFOUBOEXBTUFEUJNFGPSVTFST ✘'PSTFSWJDFQSPWJEFST JUSFQSFTFOUTBTJHOJGJDBOUMPTTPGPQQPSUVOJUZ • *GUIBUXBTUFEUJNFIBECFFOTQFOUVTJOHUIFTFSWJDF JUDPVMEIBWFMFEUPJODSFBTFE TBMFTGPSTIPQQJOHTJUFTPSNPSFBEWJFXTGPSOFXTTJUFT #FDBVTFEFTJHOJOH6*TUIBUQSFWFOUVTFSFSSPSTJTTPJNQPSUBOU XFEFWFMPQFE5BQQZ 6TBHFTUBUVTPG-:$PSQPSBUJPOTFSWJDFT $JUFEGSPNIUUQTTZJNHKQJEPDTJSBSDIJWFTQSFTFOUKQQSFTFOUBUJPOQEG