Posts Tagged ‘mockups’

(on Technorati , Del.icio.us)

GNOME 3.0 Ideas (Intelligent Desktop)

This is based off of a Summer of Code application I made in 2007, titled “Intelligent Desktop.” Recent discussions have reminded me to at least blog about it. And given my current employment status, I have the time. ๐Ÿ™‚

Note: You may also be interested in File List Applet filelistapplet.

Messy Desk

The desktop – this gigantic area of screen real-estate – is a mess. Some people use their desktop to dump random files that they’re working on, or have recently downloaded. Others work tirelessly to keep the pretty background picture visible with minimal icon clutter. Still others find the Desktop useless because it fills up with icons too easily. In the Nautilus Desktop (GNOME’s default), icons can get placed on top of one another either by a bug in placement or simply because there is no space left, which really deters from the usability. Personally, I clump different themed files/folders into the corners of my desktop. When a file is added to the desktop procedurally, there is no obvious place to put it and thus no obvious place to look for it. This is compounded if there is a “hole” in one of my “icon clumps,” in which case the hole may be filled with the new icon making it extremely difficult to locate by both file name and screen location. I recently gave up on having mounted drives displayed on the desktop. Anything dynamic fails miserably as their location changes each time, and sometimes they even end up overlapping other icons. In any case, it seems the desktop requires maintenance to work, when it really shouldn’t.

An Intelligent Desktop would overcome icon clutter automatically and intelligently. It would also be a starting point to looking at potential benefits of a more dynamic desktop view. I’ll explain what I mean by this in a second. This is NOT that silly little notification that your desktop has old/unused icons on it.

Automatically Sorted, Categorized, Updated and Easily Searched

The desktop is a useful place to dump files, but retrieving them is a pain. In fact, browsing the desktop for that particular file (or folder) is a pain without a lot of maintenance. My idea requires an always-visible, on-the-desktop set of UI elements that I will call the Desktop Action Window (DAW). The easiest way to think of the DAW is as a sidebar for the desktop. (Don’t stand up quite yet, sidebar haters.) But rather than the DAW being a collection of meta-information or unrelated widgets, think of it as a controller to the desktop view (formerly just a desktop). Performing actions on the desktop via the DAW simply creates a new view of the desktop. The original/default view that is customized by the user will always be available. If you think in terms of Model-View-Controller, the current desktop is essentially everything. With the DAW, the DAW becomes the controller, the desktop viewing area becomes the view, and the model is partially hidden. The DAW should allow easy management of multiple views of the desktop, some automatic (Images, Movies, Recently Modified), some static (Default, Custom).

And you shouldn’t be concerned about a sizable widget infringing on your carefully chosen background, there are ways around that: the DAW could be hidden when no mouse movement on the desktop occurs (like the controls of a photo slide show), it could be semi transparent until the mouse is over it, it’s location could be customized, etc.

Some quick ideas for different actions in the DAW include:

  • An automatically generated list of types of files on the Desktop. Selecting one of them displays all icons of that type.
  • A text entry for string pattern matching.
  • Ability to easily hide all icons, except ‘always visible icons.’
  • Ability to have custom views displaying only icons that user specifies.
  • Ability to easily open file manager and display all files
  • Some form of icon pager or scrollable desktop view to allow for arbitrary numbers of icons to be displayed per view.
  • Ability to view and manipulate an arbitrary folder, such as Home, in the same way.

Mockups

This is where I stop the prose and leave you with a couple mockups. The “Overflow” view could probably be replaced with “New” or “Recent” for recently modified files. Anytime new files/folders/launchers have been added, the button could be flashing to grab the user’s attention. Better not to alter the default view at all, I think.

Update 2008/12/04: I’ve started implementing what I was thinking about with the automatic view filter as a GNOME panel applet. Check out File List Applet.

GNOME Panel / Ubuntu UI Musings

Reading Ubuntu 7.10 Pragmatic Visual Presentation Critique got me thinking about a better way to position applets and launchers on the panels in GNOME.

Imagine if you have locked all your applets and youโ€™re trying to move a new applet to a specific location, you have to first unlock every applet which involves a right click, left click check-box, and repeating this for all locked applets. Once the applets have been unlocked and you have placed your new applet at the desired location, guess what? Time to lock them all again! Right click, left click check-box, right click, left click check-box, you get the idea. A method of locking/unlocking all the applets at the same time seems like a much welcomed option at this time.

I totally agree here. The panel should have a mode, (“layout mode”?) that darkens the rest of the screen so it’s obvious that you’re operating on the panels. Clicking off the Panel will exit this mode. I’m not sure what the best method would be for entering this mode. (An option on the context menu of every item on the panel?) Once in this mode, applets and launchers can be dragged around with the left mouse button. Moving the mouse cursor over an applet or launcher will highlight it with a red outline or something, so it’s obvious what will be moved. There should be a small lock icon below each. Clicking this will toggle the position lock. Speaking from experience, you usually want to do multiple unlock/move/lock actions at once, and with the current interface, it’s rather painful, as the author points out.

A quick mockup (I found an anchor before I found a lock, but an anchor makes sense):

Layout mode mockup

The author also touches on many other things that I don’t really see as big issues. Blurry icons? And he complains about icons not scaling properly with a resized panel. (See here.) For individual launchers, and the volume applet, the icons will scale fine. I’m not convinced scaling the Notification Area icons up would be desirable, as they would take up a lot of extra space and they can appear and disappear frequently, but that might be the user’s desired effect. Maybe an option for the user to say if they want them to scale, wrap, or neither… but all the icons in the notification area should definitely be consistent in behaviour, just as the launcher icons are on the panel.

notification area

Desktop Effects. He says they feel like a hack. I would agree that the defaults are truly terrible (wobbly windows? seriously?) and they certainly aren’t without their problems. As one would expect, they even introduce new defects. But after installing CCSM, and playing around with what’s available, I must confess I like them and I think they add a valuable layer of communication to the user: windows that aren’t responding fading to dark (see pic), new windows sizing and fading into existence, minimized windows flying to their position on the Window List applet (taskbar), desktop panning, zooming anywhere, live thumbnails for every application, etc. I do wish I could enable the one feature of wobbly windows to act as the system bell, and have the window wobble as a visible bell. I really liked that. But I can’t enable that single wobbly windows option without disabling something else I’m currently using. Also, the workspace switcher seems to be broken. I can’t drag windows from workspace to workspace within it.

not responding

Certainly, I agree the preferences menu could be more sensibly organized, but I think the Appearance capplet is great. A reference to the Appearance capplet within the mouse capplet is all that’s needed to improve the discoverability of the mouse cursor icons.

Two About menu items under the main System menu (one for GNOME and one for Ubuntu): they don’t bother me. There’s only four other items on that menu, and these are both important when users are reporting bugs for checking which versions of software they are running. The “Help” launchers are something I never use, and the first things I remove. But for novice users, maybe they’re helpful. I really wonder how often people read the included documentation, though….

Certain types of behavior should be unacceptable where user experience is concerned. It is unacceptable in my opinion for a Linux Distribution to knowingly ship broken Artwork with the distribution.

He’s clearly never used windows. ๐Ÿ™‚ In all seriousness, if usable features had to wait on perfect aesthetics before mass deployment, Apple might be the only company releasing anything. In the Open Source world, users are depended upon for everything, including the aesthetics. If the software never gets out, it doesn’t get the attention it needs, bug reports aren’t filed as soon, and relatively stable (and usable) software is dis-serviced by not being allowed to gather the feedback it should. The article itself is a case in point. It’s also worth mentioning that Ubuntu Gutsy is not an LTS release. The Hardy Heron release will be, and that makes it especially important for Gutsy to get as many new features into users’ hands as possible. Linux distributions depend on the community and can’t evolve as effectively behind closed doors.

Hmmm… I suppose this post turned into more of a response to the post on Architect Fantasy (not my original intention), which I found interesting but didn’t agree with everything (which is totally fine).

Pidgin 2.1 UI Ideas

Quite a lot of UI modifications have been made to Pidgin since 2.0, in a relatively short time. I’m happy to say, it’s gradually getting better. The window has a minimum size which prevents UI elements from being cut off, the text formatting has been collected into a drop-down menu, and it generally looks much cleaner.

I’ve been lurking on the pidgin-devel list keen on UI discussion, as I think it’s an area where pidgin can improve greatly. I spent an admittedly long time in The Gimp illustrating a couple UI ideas in the form of mockups.

First, this is the target conversation window mockup, done by Hylke Bons.

Now, this is what the conversation window currently looks like (minus the comments, of course).

I’ve basically modified the target UI slightly.

Full-size user avatar

default

It’s nice to see the avatar how it’s meant to be seen. It makes the conversation more unique for each individual. I think the vertical space will eventually be needed as pidgin implements more protocol features, anyway. Some people complain that too much space is occupied by such an infopane, but a button which toggles full-display and no-display (or small-display) could easily be implemented. I was thinking you could just double-click a tab, but when I tried it to see if that did anything, it let me give my contact an alias within the tab! Feature discovery! heh.

Selectable text

Something that has always irritated me with nearly every modal window: why not make text selectable? I can’t think of any reason why not to do it. It doesn’t change the UI at all, and will make it more useful to those copy-paste users – there’s a lot of them. (Get user info – which is terribly delayed, and fails often – should only be needed when the user wants to select information that is not displayed right in front of them.)

selectable text

Clickable links

Any email links should behave like a mailto: link, displaying a menu with the options of writing an email to that address or simply copying the email address. The same should be done for links inside the chat window, “open in browser” and “copy link location.”

clickable email links!

Protocols

Pidgin handles many different protocols: MSN, Yahoo!, ICQ, IRC, etc. The idea is that you can use a single IM client to communicate to all of your friends. Many people use multiple protocols for whatever reason (some of my friends are on MSN, the rest on gChat, a couple on ICQ). But really, having a bunch of accounts for the same person cluttering your contact list does more harm than good. A good way to overcome this is to use the “Expand” item in the contact list context menu: right click on a contact, and select Expand in the context menu, then drag all this person’s different accounts into this expanded contact. When in a conversation window, you can change the active protocol used to chat with your friend by using the Send to menu item. But the problem is, you have to go up and check the menu to see what the active protocol is.

super-useful protocol button!

The entire Send to menu can be replaced by a protocol button in the infopane that acts as both the protocol indicator and selector. The space to the right of the protocol button can be used for protocol specific functionality, as they become available (video, voice, whiteboard, etc). Using the button to change the active protocol could change the available actions to the right of it.

Tab size

A lot of discussion/debate/flame is going on with the purpose of reducing tab-size (removing the status, and close icons). Personally, I think the status icon in the tab is very useful for seeing the status of the people you have open conversations with and should not be removed. If you have 10+ conversations open, you can always right-click on a tab and get a nice list. Sean Egan (the lead developer) jokingly put forward the idea of having the conversation tabs on the side, which actually doesn’t look bad. Maybe the format-bar and info pane would have to go on the right of the chat window… not sure how that would work.

Update Aug 5th

  • First of all, if you want the developers to hear your thoughts on this issue, you should discuss it on the pidgin-devel mailing list. If you just want to follow any discussion from the list, you can browse the archives.
  • I noticed this post has been dugg.
  • After a little feedback on the mailing-list, I’ve got another mockup. I’ve added a dropdown indicator to the button when the active conversation-buddy has more than one contact, and put example contact lists for clarity.

    Further illustrating the protocol button next to the contact list.

Update Aug 14th

It’s true. Pidgin doesn’t have a Send button. I had no idea this bothered some people, but I guess it could be made more obvious.

Greyed out text telling the user how to send a message.