Design/Meetings/2012-12-15

    From The Document Foundation Wiki

    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