Design/Meetings/2012-12-15

    From The Document Foundation Wiki

    TDF LibreOffice Document Liberation Project Community Blogs Weblate Nextcloud Redmine Ask LibreOffice Donate

    Attendees

    • Astron
    • Medieval
    • mirek2

    Topics

    • Impress Remote UX & icon

    Tasks

    Astron

    • propose improved Impress remote UX officially
    • propose improved Impress remote icon

    Log

    17:13:07 mirek2: hi astron
17:13:16 mirek2: it looks like I'm able to attend after all
17:13:25 mirek2: though mostly passively, I think
17:13:33 mirek2: I have a huge exam to study for
17:14:57 astron247: hi.
17:15:10 astron247: great that you could come.
17:15:56 mirek2: :) as I said, mostly passively
17:16:06 mirek2: though if you'd like to quickly discuss something, I'm game
17:16:56 astron247: hum. well. i guess, well wait another ten minutes, if not ill start with impress remote...
17:17:38 medieval: hi
17:18:02 astron247: hi
17:19:36 astron247: so, ive looked at the android impress remote ... these are some screens of it:
17:19:38 astron247: https://dl.dropbox.com/u/87946285/libreoffice/Screenshots.tar.bz2
17:21:10 astron247: and ive been thinking that there are some things that could be better. ive made a writeup of a number of things that i didnt like on ux-advise... but that was before i got the app to connect to my computer.
17:21:40 astron247: luckily, the main experience seems pretty solid to me, but there are a few things that id still like to change...
17:22:42 mirek2: is the action overflow native? (it looks a bit strange to me for some reason)
17:23:10 mirek2: also, which android version?
17:23:18 astron247: i found it a bit odd that it isnt flush right, but some pixels from the right border.
17:23:23 astron247: im on 2.3.7
17:24:34 astron247: and impress remote uses actionbar sherlock to emulate the android 4 action bar
17:24:59 astron247: but the thing that is really weird, is that all the menu fonts are such a dark grey...
17:25:50 mirek2: oh, I thought they were disabled
17:25:57 mirek2: they don't look tappable
17:26:02 astron247: no, they aren't
17:26:32 mirek2: I'm hoping the experience is better on 4.0+
17:27:13 astron247: it probably uses native action bars there ... but no one really has 4.0 so far. that will likely take another year
17:28:12 astron247: in any case, i found some things that were problematic with the design, also, therefore i started on a new, slightly different mockup:
https://dl.dropbox.com/u/87946285/libreoffice/impremoteuimockup.svg
17:28:19 astron247: (ignore the fifth panel for now)
17:28:49 astron247: also, the 2nd and 4th panel, only show the tappable areas
17:29:03 astron247: (of the previous mockup)
17:29:50 mirek2: I like the notes bar
17:30:00 mirek2: I don't think the arrows are necessary, though
17:30:12 mirek2: given that Gallery, for example, works the same way
17:30:19 mirek2: and doesn't have navigation arrows
17:30:40 mirek2: btw, the notes bar could use a label, I thought it was chat at first look
17:30:45 mirek2: because of the icon
17:31:19 mirek2: I don't quite like the top bar, because:
17:31:21 astron247: strange, the notes bar has a label... maybe you havent installed roboto right?
17:31:32 astron247: wait, id like to explain...
17:31:51 mirek2: I have it, but I'm viewing this in Chrome
17:31:55 mirek2: maybe that's the reason
17:32:07 mirek2: well, could I list my concerns first?
17:32:24 mirek2: or at least one: it makes it very easy to exit out of a presentation during a presentation
17:32:30 mirek2: by providing a back button
17:32:38 mirek2: alright, go ahead
17:33:21 astron247: what are the things, i tried to change:
* notes bar: the current notes separator is almost impossible to move – and I don't think it is really necessary to move it – simple on/off seems enough to me
* with the current cover-overflow design it is too easy too move more than one slide – thus the added arrows (this zone already exists, but it isn't visible)
* the back button (action bar) to finish the presentation
17:34:20 astron247: (also, currently, pressing back lands you at the select a computer screen (meaning you have to reconnect), not at a screen where you can view open impress files.
17:34:33 mirek2: a) I agree
17:34:48 mirek2: b) this should be solved with optimalization, I think
17:35:06 mirek2: keep in mind that a number of people will barely look at the screen while presenting
17:35:17 mirek2: and just slide over the screen to move forward/back
17:35:54 mirek2: is it also easy to accidentally move more than one image in the Gallery?
17:36:09 astron247: right, but tapping seems easier than sliding in that case, and moving multiple slides back seems a valid use case to me – albeit also covered by the grid view
17:36:45 mirek2: tapping -- you have to look at the screen to hit a target
17:36:49 mirek2: sliding -- you just slide over the screen
17:36:56 astron247: i dont have android 4. i believe the a2.3 gallery is quite different. my gallery does not use a coverflow view, so it is a bit different.
17:37:08 mirek2: plus there's the added benefit of seeing more of your slide
17:37:37 astron247: so youre saying that only the current slide should be visible?
17:38:14 mirek2: no, I'd stick to the design where the next slide can be visible as well
17:38:20 mirek2: at least in horizontal mode
17:38:55 mirek2: tapping on a slide would be a valid way to move to it as well
17:40:04 mirek2: anyway about point c): finishing the presentation shouldn't be that easy, as, as I said, a lot of users won't have their eye on the screen and could easily accidentally tap it
17:40:39 astron247: hm, but the icon is in the top left...
17:40:59 astron247: i mean, a phone is physical, you certainly no ~where you are
17:41:09 astron247: ^no^know
17:41:12 astron247: (ouch!)
17:41:41 mirek2: but when you're giving a presentation, most of the time, you're not focusing what's on the screen
17:41:58 mirek2: or on how exactly you position your hand on the device when you're not using it
17:42:00 astron247: yes, but you have the phone in your hand
17:42:39 mirek2: is there a good use-case for ending the presentation quickly when you're in the middle of it?
17:42:44 astron247: what do you mean by "not using"?
17:43:16 astron247: the use case is "i want to go back to the previous screen" imho
17:43:31 mirek2: well, you're giving a presentation, talking to your audience, and just holding somehow holding the phone until you finish with the slide
17:43:50 astron247: also, keep in mind that people might just want to play around with impress remote first
17:44:23 mirek2: astron247: honestly, keep in mind that the UI should be tailored towards actual use cases
17:44:24 astron247: mirek2: yes, thats the idea of what you can do with the remote.
17:44:34 mirek2: when people are presenting
17:44:52 mirek2: a quick "end presentation" button doesn't really make sense then
17:45:26 mirek2: if you absolutely need to end the presentation in the middle, there's the overflow menu
17:45:39 astron247: what would that do?
17:45:54 mirek2: I mean, action overflow
17:46:08 astron247: also, it is standard android behaviour to have the back button at this position
17:46:57 mirek2: astron247: not so -- it is standard behavior to have the "up in hierarchy" button there
17:47:08 mirek2: which the slide overview works perfectly as
17:47:27 mirek2: the back button, on the other hand, is on the device
17:47:52 astron247: how is the slide overview "up in the hierarchy"? it seems just another way to view the same slides as before
17:48:25 mirek2: same as the image gallery overview is up in hierarchy from an image
17:48:38 astron247: hierarchy as i see it: connexion to computer -> file to present -> file in presentation mode
17:48:49 mirek2: or the inbox is up in hierarchy from a specific message
17:50:41 mirek2: astron247: yes, that's an alternative hierarchy, but, as I said, it's not good to put a destructive button that ends your presentation in a prominent, easy to hit place
17:51:07 astron247: it is not so easy to hit unless you have very long fingers
17:51:28 mirek2: well, it's easier to hit than any of the other action bar buttons
17:51:39 mirek2: given that it's bigger and it's the only element on the left
17:51:47 astron247: also, what would your hierarchy look like?
17:52:06 mirek2: to end a presentation, an "End presentation" button in the overflow menu should suffice
17:52:47 astron247: i would put a finish presentation button at the end of the slides, too, actually
17:53:02 mirek2: I agree
17:53:21 mirek2: basically, when you enter into a presentation, you should be firmly grounded in that presentation unless you reach the end or manually tap an "End presentation" button in the overflow menu
17:53:47 astron247: still, what would your hierarchy look like?
17:53:55 mirek2: the hierarchy being slide + notes = main screen, overview = overview
17:54:23 mirek2: I believe the facebook app has a similar hierarchy
17:54:50 mirek2: where the central screen is one step down
17:55:17 astron247: what do you mean bey "overview"? the overview of pcs to connect to or the overview of files (which doesnt yet really exist)
17:55:31 mirek2: overview of slides
17:55:35 mirek2: imagine it this way:
17:55:53 mirek2: imagine you've opened up a mail application for the first time
17:56:10 mirek2: the first screens ask you to set up your account
17:56:34 mirek2: but there's no back button to get to those screens
17:56:47 mirek2: if you want to set up a different account, you do so through a menu
17:57:11 mirek2: it's not a perfect metaphor, but hopefully it carries the message across
17:57:50 astron247: our case is different: unlike a mail account, people will be switching the pcs they connect to rather often, i think
17:58:08 mirek2: the basic idea is that we want the user to be firmly grounded in the presentation until he knowingly chooses to exit it
17:58:51 mirek2: accidentally closing a presentation in its middle, perhaps through a misunderstanding of the icon, could be quite detrimental to the presenter
17:59:26 mirek2: (as you've shown, some people might think the button means "back" and might tap it if they want to go back a slide)
18:00:04 mirek2: (it's a theoretical example, but you're playing with fire when you put such a destructive button up front)
18:00:31 astron247: whats there to misunderstand? up in hierarchy usually means, go back to the previous totally different screen in the same app
18:00:42 mirek2: (one might trigger it on an accidental reflex)
18:00:44 astron247: (ie. not "go one slide back")
18:01:17 mirek2: suppose the user was in slide overview before
18:01:29 mirek2: he might just hit this "up" button by reflex
18:01:51 mirek2: and have to face the embarassment of ending his presentation
18:02:18 astron247: how would the user end up in the slide overview before?
18:02:44 mirek2: tapping the slide overview
18:02:56 mirek2: or, if it gets implemented, by pincing to zoom out
18:04:16 mirek2: yes, I know, if you think about it, the difference is clear
18:04:24 astron247: right, so "by tapping the slide overview" – the slide overview gets underlined, and users will then know, this acts like a check box
18:04:41 mirek2: but you're giving a presentation, in front of people
18:04:51 mirek2: you're not going to be consciously analyzing which button does what
18:05:11 astron247: sure, but i think people are intelligent enough for that...
18:05:17 mirek2: putting a destructive button at the forefront of our UI goes directly against ux-error-prevention
18:05:25 mirek2: astron247: this has nothing to do with intelligence
18:05:54 mirek2: have you never accidentally done something that you didn't really mean to?
18:06:21 mirek2: e.g. put a piece of trash in the sink while you meant to put in in the trash
18:06:25 mirek2: or something like that
18:06:42 mirek2: don norman describes quite a few of these cases in his book
18:06:53 mirek2: and argues to design with error prevention in mind
18:07:17 mirek2: a button without a label that's at the forefront of the UI shouldn't be destructive
18:07:39 mirek2: a button with a clear label accessible by two taps is much safer
18:08:18 mirek2: I understand that those playing around with it might like to be able to switch presentations/computers instantly
18:08:27 mirek2: but, really, it's not meant for that use-case
18:08:54 mirek2: those experimenters will just have to go through the action overflow
18:12:41 mirek2: or am I missing a use case?
18:13:19 mirek2: in which it'd be critical to end a presentation quickly while in the middle of it?
18:13:47 astron247: well, "oh, i just opened the wrong file" would be one
18:14:11 mirek2: that's during setup
18:14:44 astron247: i can imagine myself being five minutes late for doing much setup...
18:14:46 mirek2: you usually have time before setup, so two taps instead of one shouldn't be a problem
18:16:22 mirek2: yes, but rarely will it happen that there's multiple computers to connect to and multiple presentations open
18:16:46 mirek2: all in LibreOffice Impress, too
18:17:11 astron247: the simple case of opening one file and it being the wrong one is enough actually
18:17:23 mirek2: and isn't the setup tied to a code that you have to enter?
18:17:36 astron247: not currently.
18:18:07 mirek2: wouldn't closing the file on the computer end the presentation on the remote?
18:18:27 astron247: i dont really know if it is insecure or if it uses the existing pairing that the os has already made.
18:18:50 astron247: mirek2: yeah, youre right about that
18:20:01 mirek2: so could we agree to leave the action bar as is?
18:21:43 astron247: the point that i dont believe the grid is really up in the hierarchy still stands, but i guess...
18:22:52 astron247: btw: do you still have the original svg of the mockup?
18:23:00 mirek2: if you insist, the grid button could be moved to the right
18:23:29 astron247: that would somewhat destroy the aesthetic then, no?
18:24:17 mirek2: yeah, it probably would
18:24:22 mirek2: I'll look for the file
18:24:50 astron247: thanks!
18:25:27 astron247: okay. the next problem i had is that all the timer options seemed pretty awkward (and crammed) to me...
18:26:17 mirek2: ok, it's three files: http://ubuntuone.com/51vkFbJmPy8RUAH70zhV9H, http://ubuntuone.com/6JilUNqtGa6kSNX0ZHsxwD, and http://ubuntuone.com/4O8nWlv6DYrGmd7c0L4N7O
18:26:56 mirek2: astron247: could you post a screenshot?
18:27:05 mirek2: or do you mean in the proposal itself?
18:27:39 astron247: the implementation looks mostly like the mockups, so yes, i think thats a design bug
18:28:07 mirek2: how would you imagine it?
18:29:13 astron247: i havent yet, but it seems like this overlay is too small to fit all it is supposed and it doesnt give a clear instruction on what to do first
18:29:14 mirek2: feel free to design for it, it's not a UI element that I would insist on
18:29:21 astron247: okay.
18:30:46 mirek2: oh, btw, I accidentally asked if I should make a Glade file of the "Save template" dialog
18:31:03 mirek2: before finding out that Glade runs molasses-slowly on my computer
18:31:20 astron247: why that?
18:31:21 mirek2: would you be willing to take the task?
18:31:40 astron247: okay. do you have an svg at the ready?
18:31:46 mirek2: why does it run slowly? no clue
18:32:37 astron247: seems odd to me, since glade is not really a big application ... and doesnt do all that much except write xml files.
18:32:44 mirek2: astron247: no, but the way I imagine the design is simply a textbox for a name, a drop-down menu or listbox of folders, and cancel and accept buttons
18:33:11 mirek2: kind of like when you add a bookmark in a browser
18:33:28 astron247: okay. ill see what i can come up with.
18:33:45 mirek2: wait, I just realized Cedric added a whole folder hierarchy
18:33:45 astron247: so ... impress remote...
lastly, i was missing documentation on how to host a server to use the impress remote with.
18:33:52 mirek2: so it may not be so simple
18:34:06 astron247: mirek2: has he already done that?
18:34:21 mirek2: don't know, but I think so
18:36:06 mirek2: honestly, though, I'm beginning to think that the new Template manager is turning into the old one, just with thumbnail view instead of list view
18:36:25 astron247: i fear my reply was a bit harsh ... at the same time, i am really becoming disillusioned...
18:36:56 mirek2: astron247: well, I was happy to have someone on my side :)
18:37:37 astron247: good to know that at least...
18:38:00 mirek2: I feel like all the decisions that go into the template manager designs are based on how Explorer + macOS Finder work
18:39:53 mirek2: not that there's something wrong with that, but it'd be nice if the user experience was at the forefront instead
18:40:36 mirek2: anyway, about the remote -- I can't comment on the documentation, since I don't have an Android device
18:40:43 astron247: no there is something wrong with that, were still designing for the supposed power user
18:41:39 astron247: – but all too often, i think that power user is the one IT guy in an organisation and everyone else is sacrificed for him
18:41:57 mirek2: well, the power user persona, at least as I see it, is mostly about keyboard shortcuts and other quick cuts
18:42:30 mirek2: a power user could easily live without nested folders and double-click
18:42:56 astron247: yes, but they might find
* working as they always have
* lots of options
18:43:01 astron247: a good thing
18:43:38 astron247: re a), see for instance the opposition against linux servers from windows admins.
18:44:17 mirek2: well, if that's the case, then we really ought to have never redesigned the dialog in the first place
18:44:38 mirek2: I mean, long confusing lists of file names are excellent for the power user
18:45:01 mirek2: much better than a grid of just a few templates at a time
18:45:10 astron247: right.
18:45:44 astron247: okay. lets not depress ourselves.
18:45:55 mirek2: :)
18:46:14 mirek2: it can all change in the future
18:46:29 astron247: okay. one more thing: what do you both think about my impress remote icon proposal?
18:46:34 mirek2: might have to, once the Android port is developed enough, just for sync
18:47:30 mirek2: astron247: well, I don't really like the remote part of it, mostly because it has blurry edges
18:48:11 mirek2: and I would prefer a slightly tilted icon as per the Android design guidelines, but that's not too important to me
18:48:46 mirek2: my recommendation would be to add more definition to the left and top borders of the remote
18:48:56 mirek2: and perhaps town down the inner gradient of the remote a bit
18:48:59 astron247: okay.
18:49:46 mirek2: hold on, I see that you added some tilt
18:50:04 mirek2: but it's not really noticeable
18:50:14 astron247: right, i did.
18:50:18 mirek2: seems more like a rendering bug, to be honest
18:50:32 astron247: but paper is really rather flat...
18:51:11 mirek2: I wouldn't think of it as paper in this case
18:51:35 mirek2: messaging bubbles also tend to be 2D, but google represents them as a 3D block
18:51:55 astron247: okay. ill try with more tilt.
18:52:26 mirek2: take a look at the messaging icon, I think it shows the tilt the best
18:52:49 mirek2: but if it proves too hard to add tilt, a flat icon would work
18:53:25 mirek2: https://developer.android.com/design/style/iconography.html
18:53:49 astron247: about the remote: im actually not very happy with it. but i dont really know how to make it better. (i tried going for an apple remote ... but not exactly that ...)
18:54:01 mirek2: also, no shadow would probably be best
18:55:00 astron247: then the problem becomes how to separate foreground and background
18:55:20 mirek2: a possible alternative would be to just use the presentation screen icon from the Impress icon and show a small smartphone with a smaller version of the presentation in front
18:56:10 mirek2: astron247: inner shadow? I think the native Android icons don't use shadow
18:56:22 mirek2: (or maybe just very little)
18:57:15 astron247: i would rather like to keep the libreoffice icon in the remote app icon – otherwise users wont know if its the real app, or a knockoff
18:57:23 astron247: (or inofficial app)
18:57:55 astron247: mirek2: they do use shadow, i looked at the iconography page
18:58:18 mirek2: well, the presentation part of the Impress icon would still be in the icon, so users should still connect it with our official Impress
18:58:56 astron247: its not half as iconic as the libo document icon
18:59:11 mirek2: alright
18:59:32 mirek2: yes, but the shadow is barely visible
19:00:13 mirek2: (it's very light and two pixels wide)
19:00:43 astron247: my first idea was actually to put white fuzz behind the icon instead of a shadow...
19:01:07 mirek2: try it and see how it looks
19:02:30 astron247: i tried, and it is not too realistic
19:02:57 mirek2: ok, then just tone down the shadow a bit
19:03:20 mirek2: and move it down a bit, so it doesn't show at the top
19:03:38 mirek2: (you can see from the Android iconography page that none of the icons have shadow at the top)
19:03:46 astron247: right.
19:03:48 astron247: okay
19:03:56 astron247: shall we leave it at that?
19:04:06 mirek2: ok
19:04:14 mirek2: could you upload the log?
19:04:24 astron247: yes. later today.
19:04:41 mirek2: ok, thanks
19:04:46 astron247: bye then! and lots of success
19:05:00 mirek2: thanks, I'll need it
19:05:05 mirek2: you too
    Retrieved from "https://wiki.documentfoundation.org/index.php?title=Design/Meetings/2012-12-15&oldid=161487"