18:59:59 #startmeeting ux and TB teams sync 18:59:59 Meeting started Wed Apr 25 18:59:59 2018 UTC. The chair is isabela. Information about MeetBot at http://wiki.debian.org/MeetBot. 18:59:59 Useful Commands: #action #agreed #help #info #idea #link #topic. 19:00:21 antonela: which ticket do you want to start with? 19:01:11 #25695 19:01:19 lets talk about about:tor! 19:01:23 ok! 19:01:31 this ticket is kind of huge and includes different steps 19:01:46 we already talked a little bit about it and i updated the ticket 19:02:00 basically im using 2 firefox ui/ux for onboarding 19:02:18 one of them is for new users and the walk-through for new features 19:02:48 **disclaimer** All the copy text you find there is placeholder and needs work 19:03:29 but inicially, i'd like to know if you think i'm missing something important compared with the old/current one about:tor content 19:04:12 then, we can talk about the onboardings :) 19:04:18 19:04:22 lol 19:04:24 Thinking at a high level, the about:tor redesign should take into account the “Tor is not working” case we have now as well as the banner we insert for the end-of-year fundraising campaign. 19:04:38 (assuming we want to have such a banner each year) 19:04:54 antonela: so, this is dealing with #24918 as well? 19:05:09 i was wondering whether that's the case or not while looking at #24309 19:05:30 mcs: yes! about:tor different states is something we need to consider, i think we have a ticket for alert pages tho 19:05:34 GeKo, yes 19:05:41 ok 19:05:44 I also wonder if we need the "Test Tor Network Settings" (check.tpo) link which we have today. 19:05:48 * isabela has some links from the current page that i think should be at the new design as well (donation, tor manual, tips) 19:06:07 Are we looking at 25695-about.png right now? 19:06:08 is for circuits, but im trying to setup a 'framework' to replicate those flows for other features/changes too 19:06:22 arthuredelstein: and the other one 19:06:33 yes 19:06:35 https://trac.torproject.org/projects/tor/attachment/ticket/25695/25695-about.png 19:06:43 https://trac.torproject.org/projects/tor/attachment/ticket/25695/25695-about-new-feature-walkthrough.png 19:06:50 sorry they are super big and the preview is not working 19:06:55 sorry for that :( 19:07:01 is ok 19:07:22 they look cool! 19:07:25 antonela: i think i like the general idea for dividing the about:tor page into areas 19:07:40 which are used for different things 19:07:50 while the things stay basically the same 19:08:27 so, users get essentially trained to see, "oh, that's a critical message" 19:08:42 or "oh, that's a new feature" just be looking at the relevant area 19:08:43 yep, that is nice 19:08:49 yes, is the idea 19:08:58 also is a common pattern for notifications 19:09:00 but 19:09:02 I like the areas but I’m worried users will never see the new feature onboarding because it is “below the fold” on most laptops 19:09:03 i mentioned that 'update tor' is another ticket which im still reading so maybe we can talk about it next week 19:09:40 brade: im designing on 1000X1000 px browser which i think is the TorBrowser's default 19:09:47 the main idea is to have it above the fold tho 19:10:29 the height is limited by the user’s display; mine is 800 (some will be 600 high) 19:10:54 oh cool, we still have room to collapse sections 19:11:06 i mean, to compress no collapse 19:11:30 I guess this can be a "responsive design" 19:11:40 arthuredelstein: please :) 19:12:12 Is the plan to have the same more or less for mobile? 19:12:16 if this version is good enough, i'll prepare mobile mocks which yes, should adapt 19:12:30 cool 19:12:42 arthuredelstein: yes 19:13:02 in a RTL language will they switch sides (version number and new user)? 19:13:04 we should think of a case where: 1. we have a new feature and the donation campaign banner or 2. the update note is there and the donation banner 19:13:15 brade: probably 19:13:28 Another thing I've been thinking about is having some kind of "Tor Project News" section from time to time. 19:13:42 arthuredelstein: oh i like it 19:14:04 i remember we talked with ooni people to introduce some news there, but maybe TPO ones? 19:14:09 maybe for a 2.0 version tjo 19:14:10 tho 19:14:11 we need to think of that be translated to 19:14:17 *too 19:14:19 I like the news idea, or at least something to connect Tor Browser users to our community. We should make sure it loads quickly though. 19:14:22 i mean not just a rss from the blog 19:14:37 isabela: yes, I agree it would need to be translated 19:14:39 cuz the blog psts are not translated 19:14:44 *posts 19:14:45 sorry, missed the start of this meeting (connection issue); would love to see any links shared for discussion 19:15:02 i really like firefox's bottom bar which says things, but im sure they have a team working on those updates 19:15:16 dmr: https://trac.torproject.org/projects/tor/ticket/25695 19:15:21 we are talking about this ticket 19:15:26 because i click it often and changes weekly maybe 19:16:47 * antonela is taking notes 19:17:03 Another thought was some kind of "share Tor Browser" link to encourage people to get their friends to download it. 19:17:20 what should it do? 19:17:27 tweet? maybe? 19:17:32 yeah, would that give them a text with a download link? 19:17:44 it can be localizated also 19:17:44 yeah 19:17:50 but then is limited 19:17:50 Yes, could be a tweet or facebook button (non-tracking :P) 19:17:58 haha 19:18:06 i would prefer no social media 19:18:07 not sure 19:18:11 Another thing to keep in mind is implementation complexity. I think I mentioned this last week with respect to the new feature onboarding (it is not clear to me if we will be able to use existing Firefox code or not). 19:18:13 we should pick the right social media gigant 19:19:22 I'm of course unhappy with the tracking social media does, but it is where people are :) 19:19:40 but i am afraid that this might lead to leaking info from the user 19:19:46 mcs: yes, i worked over this idea because was something we talked about, but yes, we need to see how dev effort it takes and if we can do it 19:19:53 that might not be aware 19:20:15 isabela: Yes, I think the main danger is they are admitting to using Tor Browser which could be bad for some people. 19:20:16 (yes please devs! tell us if our ideas are too insande :) 19:20:21 We can have several phases of implementation if necessar. 19:20:26 -ry 19:20:30 +1 19:20:55 *insane 19:21:44 and let#sleave social media out for now 19:21:51 *let's leave 19:21:53 ok 19:22:00 yep, i like the idea but is too risky for now 19:22:01 agreed with leaving out social media 19:22:04 we should have this in a next iteration if at all 19:22:09 Before I forget, one comment on the visual design is that to me the “Critical Message” area blends into the browser chrome a little. We should make sure it stands out so people do not overlook it. 19:22:32 at least i like to think about it more before committing to anything in this area 19:22:49 definitely needs some careful thought about risks/benefits 19:22:51 Question about the UI/UX framework. are we all happy about the what is new in the bottom? I mean the DDG search bar should have priority about what is new? 19:23:33 reminds me of https://textslashplain.com/2017/01/14/the-line-of-death/ for those who have not seen it 19:23:33 hmm 19:24:03 GeKo: ! nice tx 19:24:06 i havent seen it 19:24:15 yes but is not the same 19:24:34 igt0: that is a good point, i wonder if we should invert things 19:25:12 mcs: maybe yes, we can think about some shadows or different use of colors to avoid that situation 19:25:13 antonela: have you tried that ? and maybe we will need to pile a bunch of thing on the top of the other with that, for the case where we have donation banner plus new feature plus new release/update 19:25:42 isa: yes, i have notes to work on that 19:25:46 i mean donate + update 19:25:47 cool 19:25:57 but have things on the top instead of the bottom 19:25:58 I think the new items at the bottom are not "eye catching" enough 19:26:06 and push the search thing down when we have someething to say 19:26:19 maybe the solution for outdated browsers is a full red page, i need to read all the related tickets before approach a solution to that 19:26:34 but that will happen every time we have a new release 19:26:51 alternatively, could have another "new here" size/shape widget near the top, saying there's new features + clicking it scrolls the page 19:27:06 should be a different color, to draw attention to it 19:27:07 antonela: the update work - is more about the flow too, not only the indication of update needed 19:27:15 yes 19:27:16 i know 19:27:19 :) 19:27:25 this is why im still reading ha 19:27:31 hahaha 19:27:33 gotcha 19:27:52 We should talk more about the UX for updates. Mozilla has moved toward a more subtle UI when automated updates are working fine, although we may want to prompt users more prominently to restart to apply a downloaded update. 19:27:58 dmr, igt0: the main idea is to have the bottom part above the fold 19:28:04 (we meaning Tor Browser) 19:28:20 mcs yes, i wanted to ask you if you can be the person who can help me with some question on that :) 19:28:28 ok 19:28:30 but i was about to ping you next week haha 19:29:14 antonela: sure, I can help and brade too 19:29:22 ok! 30min time - just fyi :) 19:29:34 mcs: super thanks :) 19:29:40 wonder if antonela has enough to play more 19:30:03 about this not, i'll iterate over the comments and make mobile approaches 19:30:11 we can move to security settings aka slider 19:30:22 is everyone cool with taht? 19:30:24 *that 19:30:32 about notification, I wonder if we could use web notification api, or the user will hate us. (or if it makes sense) 19:31:00 (or even scary people) 19:31:06 oh 19:31:12 igt0: i think they wont hate us but again - they are used to it from other apps 19:31:21 i do wonder if for us, if that is safe 19:31:28 like is any leaking going on when doing that or something 19:32:00 i dont think they will hate us cuz is not something we will do all the time 19:32:10 only when updates are necessary and they should know that :) is for their safety 19:32:39 i think notifications are made for chat bots or this kind of interactions, maybe the topbar doesn't work in that way 19:32:53 but in terms of implementation, im not sure 19:33:26 like, can i set up NO notification from about:tor? in that case, can users see our messages? 19:34:00 igt0 maybe in mobile it is different 19:34:35 anw, feel free to comment the ticket i'll continue working on it 19:35:00 oki 19:35:09 #25658 19:36:03 i made a proposal last week which wasn't so successful so i kept back to think about icons 19:36:04 the closing circle should only be in two steps i think 19:36:09 you get nothing in default 19:36:18 the circle is half closed in "safer" 19:36:25 and fully closed in "safest 19:36:26 " 19:36:42 well, but if you dont have nothing, looks like something is wrong or is missing 19:36:43 oh, and there is no "safe" state fwiw 19:36:48 and we want to avoid that situation 19:36:49 https://trac.torproject.org/projects/tor/attachment/ticket/25658/25658%20-%203.png 19:36:54 https://trac.torproject.org/projects/tor/attachment/ticket/25658/25658%20-%204.png 19:36:57 ^ just in case 19:37:21 (safe is called 'standard') 19:37:39 I’m concerned that we don’t have enough pixels for the cool designs you have. I believe icons in the toolbar are 16px high. 19:37:54 good point 19:38:25 pixels at toolbar are 24px high 19:38:30 for this reason, I like the shield set from last week (outlined, half filled, filled) 19:38:55 antonela: I was looking at the CSS earlier 19:38:57 antonela: are you sure? across platforms? 19:39:19 Firefox for Android icons are 20×20, with a bounding box of 24×24, according to Material Design specs. Firefox for iOS icons live on a 24×24 grid. 19:39:29 https://design.firefox.com/photon/visuals/iconography.html 19:40:17 Andoid is probably taller due to touch size; desktop is 16x16 19:40:29 im trying to work with real-size mockups just because this, most of the options should work at really small sizes 19:41:16 good, just a thing to be aware of 19:41:30 yep 19:41:47 I'm a bit concerned that the contrast difference is too little for the "Standard" vs. "Safest" rings 19:41:50 oh, neat icons! (FWIW I prefer the "04" one .. looks less like a "spinner that's not doing its thing") 19:43:03 antonela: i wonder if one could argue "you are getting alrady the lock in the standard setting, others don't even have that" 19:43:08 i like the option A with the rings 19:43:17 ("others" in the sense of other browsers) 19:43:39 I think I'm still partial to the shield icons. I tend to think of a padlock as "protecting my belongings" while a shield is "protecting me". I don't usually lock myself in a room with a padlock :) 19:43:40 and then we could do the safer and safest thing with a closing circle or rings 19:44:21 yes, i am a fan of some shield variant to 19:44:22 I agree with Arthur. I like the shield better for protection 19:44:25 GeKo: is like how this feature is explained: you have a great default settings, but we can do more adding this, and this 19:44:28 I like the shield designs from last week better as well, but if we use “lock plus rings” keep it simple (as GeKo suggests). 19:44:34 GeKo: what about the rings around it (option A) on the other image 19:44:54 I like option A with a shield instead of a padlock 19:45:19 isabela: yes, option A is better than B i think 19:45:25 shield vs padlock is like privacy vs security 19:45:30 isabela: I don’t think you can get a nice lock within two rings in 16x16 but maybe antonela can work a miracle 19:45:32 limits are diffuse 19:45:51 antonela: google is using a shield for both iirc 19:45:58 brade: hehe :) 19:46:01 with an extra icon within 19:46:05 to differentite 19:46:06 i showed the screenshots last week 19:46:11 is like a shield + lock for security 19:46:16 *differentiate 19:46:16 shield + user for privacy 19:46:19 yes 19:46:30 so the shield stands for "protection" 19:46:42 and i think we should jump on that train 19:46:58 hmm 19:46:58 also, if you are curious, i included brave's settings screenshots for privsec settings 19:47:07 on the ticket attachments 19:48:31 the filling-a-shield idea wasnt bad, but the first state is empty and it does not represent "default" security 19:48:32 https://trac.torproject.org/projects/tor/attachment/ticket/25658/25658-exploration%202.png 19:48:39 some previous trials there ^ 19:48:53 I also like the shield better, for "protection", and also to differentiate it from the other lock that tends to be displayed on the toolbar area (TLS) 19:49:23 Brave confuses privacy and security on that tab 19:49:26 ahha 19:49:28 antonela: It is still a shield in the default case 19:49:29 like users :) 19:49:42 sysrqb: because maybe, for users, both things means protection 19:49:44 antonela: i still wonder whether we get away with just showing the shield in standard mode 19:49:50 what brade said 19:49:51 I like the three-keyholes one (or variations on that: "more shields is better", right?) 19:49:55 and then you get a shiled +1 19:49:59 *shield 19:50:00 yeah :( 19:50:16 and finally a shield +2 with fire resistance 19:50:54 i can continue working around this idea -> https://share.riseup.net/#iEm24jGMgHLQLe9sdxG7Pw 19:50:55 * GeKo gets suddenly reminded at his active dnd time 19:51:07 ha 19:51:21 In the comments on the ticket someone pointed out that some users may not understand that there's meant to be more than one shield, or more than one lock, etc. 19:51:46 super good comments at the ticket btw 19:51:47 if you go to google images and do a search for 'privacy' on images tab you see tons of locks 19:51:53 right, the onboarding should tel the users about the different ptions 19:51:57 options, too 19:51:57 if you do another for 'security' you see tons of shields 19:51:58 * dmr glances through the comments 19:52:24 interesting, brave also calls it a "shield". That's actually a pretty good word for the concept of what the security slider is doing at higher levels. 19:52:28 kevun: good point, that's what I like about the "rings" ones (you can see some arn't full) 19:52:40 meejah: yeah, agreed. 19:52:47 arthuredelstein : they have an strong concept: up shield / down shield 19:52:54 arthuredelstein: is good 19:53:19 and they have 2 options, and they have granular settings (like js) on advanced 19:53:38 (the google image search dont need to drive our decision but is a way to see what most ppl are doing) 19:53:46 anw, i found it after making last week proposal ha 19:54:07 isa is Brave user and she never thought that the shield at the top was for that, for example 19:54:20 yep! 19:54:25 like, happens in the best families :) 19:54:29 i thought it was just their logo 19:54:38 wait you are not using tor browser!1!! ? 19:54:38 but they never told me about it either! 19:54:42 like no onboarding 19:54:42 yeah, that's not obvious 19:54:48 GeKo: hahaha i use 20k browsers 19:54:56 they included a color animation now i think 19:55:01 i have all the browsers open haha 19:55:05 :) 19:55:06 :) 19:55:10 containers? what's that? hahaha 19:55:45 i think people like shields here 19:55:51 i can continue working on it 19:55:58 (/me decides to go with the flow on the shields vs padlock :) 19:56:08 yes 19:56:14 we talked about that last week too 19:56:16 i think that we will teach people 19:56:27 antonela, isabela: I got that Brave's logo *is* a shield, but if I saw that logo randomly, I wouldn't associate it with protection (because it is their logo) 19:56:35 here, I think we won't be confusing users with a plain shield 19:56:43 isabela: maybe ask during user testing? 19:56:46 Just a dumb idea -- what about a number inside the icon to indicate security level (1, 2, or 3) 19:56:57 sysrqb: aha! we could do a survey too 19:57:04 yes, someone commented it arthur 19:57:09 yeah! that :) 19:57:09 we have limesurvey on .onion for this type of things 19:57:10 which is the most secure? the 1 or the 3? 19:57:13 oops 19:57:26 i dont know, maybe it is the solution 19:57:48 as you can see, i dont have *the* solution ha, is better if we think together about it 19:57:55 +1 for survey. 19:58:08 which options you would like to test? 19:58:23 or privacy vs security associated with locks or shields 19:58:33 we can do one where we ask which symbol you associate more with privacy (have both) and another one that shows the same images but the question asks them which they will associate with security 19:58:43 yes 19:59:10 +1 for survey. Could also be interesting to see how this changes across cultures, but that could be overkill. 19:59:32 and hard if we do this like tweeting the .onion survey link 19:59:37 not a target survey 19:59:40 but open in the wild 19:59:41 Indeed 19:59:46 wondering if google or brave did it 19:59:49 * GeKo points isa to her next meeting 19:59:54 !!!!!!!! 19:59:56 heh 20:00:07 kevun: google almost certainly did user testing :/ 20:00:12 word connotation is hard. "privacy", "security", "protection", "safety", ... all have linguistic biases (and changes in different languages) 20:00:13 antonela: they probably did - google for sure 20:00:24 we read papers about padlock indicators but for settings, idk 20:00:57 oh, err, antonela: 'google almost certainly did user testing :/' 20:01:04 sorry kevun :) 20:01:31 No problem! 20:01:46 anything else we shoulld discuss today/now? 20:02:13 i dont think so, feel free to comment the ticket, i'll be working on them :) 20:02:16 antonela: yeah, i did my lame 'google image serach' for those words and there is where i got the shield == security / padlock == privacy 20:02:30 but that is a lame way to look at what ppl associate one thing to another 20:03:09 yep 20:03:31 hmm 20:03:35 how we conduct the survey tho 20:03:39 should we just tweet it? 20:03:49 or i can use my network of 'testers' and ask them 20:04:17 yes we can 20:04:29 will the survey show icons in a browser context or just words (abstract)? 20:04:35 :) i have ppl in latam africa and south asia / we can also send it to tor-talk or something 20:04:52 brade: icons and words / no browser context i think 20:05:05 isabela: that seems less useful 20:05:16 brade, i think it would be like the one made in: https://www.usenix.org/system/files/conference/soups2016/soups2016-paper-porter-felt.pdf 20:05:20 you think we shoud have a mock of the browser 20:05:30 isabela: yes 20:05:54 i was thinking of showing both icons and ask ' which icon you think is associated with privacy 20:06:47 igt0 those paper has some responses 20:06:47 isabela, maybe with different colors as well 20:06:52 sorry, answers 20:07:44 i remember the first proposal i did for this ticket, at the start at the month, with a shield included colors 20:07:53 igt0: just skimming but it sounds like they were working from a browser screen shot 20:11:08 indeed, the 'security' icon ended being a lock 20:13:17 brade, igt0: looks like they actually didn't give a screenshot in the survey; ref 6.1 Questions + Appendix C.1 20:13:22 * isabela needs to be on this other meeting sorry (will end the bot when this meeting ends) 20:13:38 instead looks like they just presented two icons and said "Imagine [...]" 20:15:06 oh, erm... they also had some screenshots; see 7.2 and Appendix C.2 20:15:55 e.g. "If you saw this browser page, how safe would you feel about the current website?" 20:16:45 We might learn something interesting from a survey, but I still think the shield works better when trying to show 3 different levels of protection. 20:16:58 mcs: I agree 20:17:12 Especially when the icon size is small. It is important for users to be able to tell at a glance what the setting is. 20:17:52 Who would’ve thought this would be such a difficult problem :) ? 20:18:20 mcs: :) 20:18:35 I also would like to reiterate the potential to overload the "lock" icon. Let's not ignore that users have been taught to "look for the lock" as an indication that a connection is secure. The toolbar area would thus have two potential locks: TLS-security lock (sometimes visible) + Tor Security Slider lock (always visible). 20:18:37 think about a onion icon working on a 1:1 radio container :) 20:19:09 it would be unfortunate for a user to "look for the lock", see the Tor Security Slider lock, and think that means their connection is secure and they can enter e.g. credit-card info 20:19:43 antonela: what is a 1:1 radio container? 20:20:16 brade: im drawing #25763 :) 20:21:07 and trying to adjust an onion icon that 1) can work on small sizes such as 16x16 px 2) this icon ideally may fits in a squared container 20:21:41 brade: seems easy, but is tricky 20:22:10 antonela: I can’t do it but I admire those who can! 20:22:26 brade: :) 20:22:35 So what are the next steps for the security indicator design? 20:23:14 on my side, i'll back to the shield icon and talk with isabela about the survey thing 20:24:21 That sounds good to me. I think the design overall is great; we just need a good icon set! 20:26:00 mcs: we are working on that! 20:26:05 :) 20:26:34 awesome work antonela! 20:26:47 +1 :) 20:27:33 oh thanks i really like to work for browser :) is so challenging but im sure will improve peoples experiences 20:27:37 *people 20:28:35 yup 20:30:38 Awesome stuff! 20:35:15 btw, did we end the meeting? :) 20:36:02 * dmr feels that we've effectively ended the meeting 20:36:16 I think we need isabela to stop the bot 20:50:14 #endmeeting