We'll remember your contact info. for this session.

File Manager - Directory List View

The current selection is market in blue. The current context has white background to stay in focus.
Only the current folder/context has focus. When the user browses to another folder all the entries that are not related to current context are greayed or lost highlight somehow.

Comments (10)

David

David replied 1 year ago , re: Paulo's Version 5 from 1 year ago

Perhaps the contents of a folder should be indented slightly from the containing folder.

Paulo

Paulo replied 1 year ago , re: Paulo's Version 5 from 1 year ago

Hi David. Yes, indent helps to contextualise the user by hierarchy, but since the horizontal space of the screen is limited, I prefer not to indent, so the files and folders name have more space to be displayed without cropping. How to address the context issue? My proposal is to focus on the current content, rather hierarchy. Please, see my 02 mockup to know my proposal for this.

Martin

Martin replied 1 year ago , re: Paulo's Version 5 from 1 year ago

New Context
Make the sub-items appear below, not indented, but be smaller than the parent on the first click, click on that parent again and it animates into that folder, discarding all siblings and making the smaller children larger. Could look quite fluid with the right animations.

The idea is that if a person can't see items, they'll click on them and 'zoom in' through the tree of information.

Guest replied 1 year ago , re: Paulo's Version 9 from 1 year ago

Why not have colours to show the level of indent? You could have the darkest colour (so if using green, dark green) as the colour for the lowest level, then as you go through subfolders the colours become lighter. You could also use different colours for file types as per the colour scheme.

Paulo

Paulo replied 1 year ago , re: Paulo's Version 9 from 1 year ago

@Martin, forgive me if I misunderstood your idea, but could it not require 2 clicks to actually open a folder? If yes, this and the animation between the 2 clicks would slow the browsing.

Michael

Michael replied 1 year ago , re: Paulo's Version 11 from 1 year ago

I like the highlight on the current folder, but it's not immediately obvious that the rows below it are it's children. What if the highlight color was extended in a narrow strip down the left side, just to give the feeling of it surrounding those items?

Also, I think scrolling the directory breadcrumbs up, so that only the current folder is shown, would make it less cluttered when viewing something deeply-nested. Then let the user scroll up to access them if they want.

Guest replied 1 year ago , re: Paulo's Version 11 from 1 year ago

What if the parent directory was moved slightly to the left making the sub-items look indented?

Paulo

Paulo replied 1 year ago , re: Paulo's Version 11 from 1 year ago

@Palefat, how do that to a bigger hierarchy of folders?
I included a mockup showing my proposal, the indentation idea and the idea proposed by Michael, so we can discuss these ideas:
https://ubuntu.mybalsamiq.com/projects/ubuntuphonecoreapps/File+Manager+-+Proposals+to+display+folder+hierarchy

Guest replied 1 year ago , re: Paulo's Version 11 from 1 year ago


I was just thinking that the width of the screen might not be a limit. Lets say you go 10 directories down. The first directories will certainly be off screen and if you want you could see them by scrolling to the left.

All I'm saying is that at the current directory depth should remain on the screen while parent folders could be moved to the left (off screen).

Paulo

Paulo replied 1 year ago , re: Paulo's Version 11 from 1 year ago

@Palefat, If we take the indentation idea preseted here:
https://ubuntu.mybalsamiq.com/projects/ubuntuphonecoreapps/File+Manager+-+Proposals+to+display+folder+hierarchy
...and add a horizontal autoscroll to keep the current folder fixed in certer, so the user has the feeling that is the parent folders that actually are movind to left. I think it's exactly your idea, right? I think this is a great idea and I'll add it to the mockup. Please, let's continue this there.

Add a Comment

Some HTML is allowed. You can also use Mockups text formatting markup.
Ex: *bold* _italic_ &underlined& {color:#FF0000}colored{color} * New lines with asterisks for bulleted lists.

Are you sure you want to delete mockup "XYZ?"

Your mockup's data and history will be deleted forever!

Notify project members