Maemo UI improvements blog.

June 10, 2009

Fremantle UI: File Chooser

Filed under: Medium UI improvements — Tags: , , , — Andrew Zhilin @ 23:06

Hello everybody.

Today I’ve read an interesting discussion at http://talk.maemo.org about File Manager and kinetic finger scrolling. Quim mentioned that user won’t need to have a fast way to navigate thru loads of items in the File Manager cause all possible media will be arranged in specific applications like media player for music, image viewer for images and so on. Well, I think he’s right in some points but a handy way to navigate thru large ammounts of files without breaking your finger is always good. So I have an idea how to make everybody happy. And to concentrate on scrolling itself, I’ll show you my vision of built-in file chooser.

Let’s imagine you want to add an image to your mail.

1

So, when you click common “clip” button, you’ll see file chooser. Not image browser, media player or even file manager, simple file chooser. To my mind it would be pretty good to see initialy root folder of the device and a list of favourite folders, that were specified in full-featured file manager. It would give user quick access to particular folder that he uses for data storing without digging thru sub-folders.

5

Now, I need to attach a screenshot to my email. I quickly browse to media/screenshots and see

2Now we have a finger friendly button to return to the parent folder that also acts as the name of the current folder in “pop-art” way, bunch of files with their properties and activated pop-up menu on the bottom. There you can choose what type of arrangement would you prefer, name, size, date or whatever you like. Small arrow button on the left switches arrangement mode.

4

And now we got to our main problem. If we have 500 screenshots in this folder, it would be too hard to reach Screenshot273.png . And this is where the magic begins. When user clicks the tiny scrollbar at the right, it switches in some kind of search mode that depends on what type of arrangement you’ve chosen. We have selected “arrange by name”, so it will show us first letter of the bottom item on the screen. Cool, but not enough for our case. So let’s add some intelligence into our scrollbar and let it show not only first letter, but also part of the name that actually changes with scrolling. And here it is, I can reach close to the screenshot273.png and then fine scroll to it.

3

Thanks for reading, hope you’ve enjoyed this article, stay tuned for more stuff!

About these ads

19 Comments »

  1. Interesting idea. Kinda related to what I’ve seen an iPod do in the past in going to a rapid, first-letter scroll when whizzing around on the scroll wheel.

    Comment by Andrew Flegg — June 11, 2009 @ 01:31

  2. Pfffiou, hum … i’ve around 40 folders at the root of my SD. Only 3 elements displayed at a time, seems too few for me. But the idea of the scrollbar is a good one.

    Maybe 4 elements could be displayed with removing or changing ‘Choose a the attachment’
    Anyway, i like the style.

    Comment by Khertan — June 11, 2009 @ 07:51

  3. You can get a bit more vertical space:
    1. Move “Choose the attachment” title to the confirmation button (“Attach”), shortening the message as needed.
    2. Move “Back to Media” line to a square “Up^” button at the bottom.

    4-5 entries per screen is still too few though. May have to decrease font a little bit to fit more entries.

    Comment by fms — June 11, 2009 @ 07:53

  4. Ah, and “Arrange” word is unnecessary in that drop-down box, “by …” is sufficient.

    Comment by fms — June 11, 2009 @ 07:55

    • In this case, the user attaches a file. It is not specifically known what this file is.

      Comment by Marat Fayzullin — June 11, 2009 @ 14:05

  5. The problem with selecting an image to attach is that the name of the picture hardly ever tells the user anything, as your example well illustrates. What is needed is some way to preview the image before selecting it which is why the most common way is to display images as a grid of thumbnails.

    Comment by Tomas — June 11, 2009 @ 11:29

    • Maybe that works for images but when making a more general file chooser it should include a preview option that launches a floating thumbnail when pressed (images), clip of audio (music and sounds), floating textarea (text files) etc. This would help especially finding the right attachment.
      On desktops this has been available for years but the implementation has always sucked by forcing the preview when a file was selected. On a mobile device the press and hold button could be an unobtrusive and light solution.

      Comment by Antti — June 11, 2009 @ 12:21

  6. Thanks for all feedback!
    @all
    I forgot to tell you, that “back to media” item is a part of the list and it scrolls too. So you have 4 items, not 3. Still not so awesome but anyway :)

    @fms:
    Good points. To my mind the easiest way to get more vertical space is to rotate the device into the portrait mode :)
    I thought that “arrange” everywhere is not nececcary too, but that’s good for new user, less confusing message. Still needs some work anyway :)

    @Thomas&Antti:
    Well, even in current File manager you can see small thumbnails instead of icons. So it’s 100% doable, good points!

    Comment by Andrew Zhilin — June 11, 2009 @ 13:12

    • My idea was to get rid of the thumbnails when not wanted, if I want to see the thumbnail I’ll ask for it.
      In some file managers (explorer, nautilus) when thumbnails are activated I need to wait for a long time for some images to show up, this is not an option in a mobile device with limited capabilities.
      Instead I’d like to see an icon, like in your mock-up, and when pressing that I get the preview. This way the device doesn’t have to read all the thumbnails in the folder but only the one I need.

      Not the perfect solution for everyone but the best for me.

      Comment by Antti — June 11, 2009 @ 13:24

      • I agree; One of the things I have on my N810 right now is >700 JPEGs that I wgot from a webcomic I was reading. Even in the main HFM view, without thumbnails, whatever it does to enumerate the files in that folder almost hangs the file manager for a few seconds. I ended up putting it in a subfolder, just so that the counting wouldn’t be activated when I was just browsing the rest of my pictures. Thumbnails would kill it completely.
        As for abstraction of the file system into a more media-centric view, I think that’s a good idea for the average user, but I would hope that there will still be an option (or other good FM) that wouldn’t take it that far. I know people that get terribly confused when they click save, and then have no idea what subfolder they saved their file to, but at the same time, I personally get annoyed enough by the level of abstraction in the current HFM that I wouldn’t like to see it go that far without it being optional. But really, if it makes it sell better, I’m all for it – there’s always 3rd party apps, and Mer.

        Comment by Jeffery — July 14, 2009 @ 00:08

    • Well, I guess rotation is out of the question right now, so have to do with portrait somehow. I do think that it will be necessary to make the font smaller though. finger navigation or not. 4-5 items per screen is still way too low to be comfortable.

      Comment by Marat Fayzullin — June 11, 2009 @ 14:08

  7. it would be nice to have a search option where you could choose to either search within the folder, or including sub-folder. you know, for the cases where you know a file is in one of x number of the sub-folders…

    Comment by .thomas — June 11, 2009 @ 13:37

  8. We have a hardware keyboard – at least for advanced uses, “search as you type” would be nice – maybe even with partial matches like Gnome Do does (i.e. search for “sc334″ and find “screenshot334.jpg”).

    Comment by thp — June 12, 2009 @ 11:25

    • thp, this is what liqbase does, but “sc334″ wouldnt be a good search because you would need logic to handle the shortening.
      “334” would work nicely tho and would be expected behaviour.
      i show this sort of thing in action in the latest liqbase video (searching for “fam” finds all family pics, or “jacob” to find all jacobs stuff).

      the principle works in lots of contexts and places and I don’t see why its not possible in gtk..

      Comment by lcuk — June 12, 2009 @ 13:41

    • This article was not about search techniques, it was about possible and finger-friendly way of navigation through long lists of files.

      Comment by Andrew Zhilin — June 12, 2009 @ 17:26

      • using the keyboard to get to item “337” quickly would appear to be finger friendly way of doing what you suggest in the article though?

        if you already know the item you want to navigate to using the KB is much more finger friendly and has tactile feedback associated ;)

        if you are browsing and not knowing what you are looking for, having a big fat overlay over the top of your content also doesn’t help because you want to see what you are hunting for.

        Comment by lcuk — June 12, 2009 @ 19:07

      • I’m really not against 5 year old spotlight search, it’s a good thing, but *again* *this* is the way of *scrolling* thru long lists.Like, for the guys who don’t like to use keyboard or fans of finger manipulations with the screen.

        Comment by Andrew Zhilin — June 13, 2009 @ 22:50

  9. After becoming fairly intimate with The Maemo 5 HIG, I can finally comment about something…

    > This article was not about search techniques…

    One of the thing that the HIG speaks of is _no sorting_, only live search. So, while this interface is interesting, it might be better served by replacing the sort feature with a live search feature. That is, unless you want to fight that battle. ;)

    Comment by timsamoff — July 9, 2009 @ 22:46

  10. I usually want to select pictures by date, or by where they were taken. Add the N900 tagging to geotags and it becomes really interesting.

    Comment by Alan Peery — December 28, 2009 @ 08:59


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

The Shocking Blue Green Theme. Create a free website or blog at WordPress.com.

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: