What would be a good user experience to present this? I have:
A folder/directory structure containing mostly media files that need to be presented in a Silverlight app. Future versions may be expanded to allow some non-media files to be presented as well. The typical use case (that I'm tailoring the solution for) is video.
The videos (or pictures) have thumbnails. Videos can potentially have multiple thumbnails (i.e. if you hover over them you can see thumbs from multiple points in the video... this may make the screen appear too "busy" though).
There is a name, and possibly a little metadata associated with each. Audio files tend to have a lot of relevant metadata. I've never used metadata for video files and find the metadata-based indexing of videos that Winamp et. al. do to be fairly annoying. There are not comments or descriptions.
It is possible to sort the lists, and they don't necessarily need to be present in the hierarchical structure (i.e. search folders or folders based on particular attributes are possible -- although would it really be useful to allow a user to have a folder for all videos longer than 20 minutes?).
Thumbnails will be retrieved from the server as needed (when they are scolled into view)
Here are some random ideas:
A one-panel list-like view with fairly small names and icons based on file type (so, basically an explorer-like interface). Possibly columns, though the disparate media types makes sorting on columns fairly useless. To get more info and a thumbnail, the user hovers over an item, which pops up details and a thumbnail if available. Single-click advances.
A two-panel view. The left has the same structure as above. A single click selects an item and displays its details in the right pane. A double-click selects an item or opens a folder.
Specific modes/filters. First, the user selects a media mode (i.e. video or audio). In a video mode, the items in the lists become larger and a more "YouTube-like" view is displayed. Clicking on a video brings the user to a separate screen containing the content. Alternatively, videos can be displayed tiled in this mode. The audio mode has a playlist editor, play/pause/stop controls, and works more like a traditional media player with drag-n-drop, etc. Picture mode allows easy access to slideshow viewing. The audio mode will allow sorting by metadata (artist/album/etc.) rather than folder structure.
(Possibly in addition to one of the above) a "quick search" feature a la Google Desktop/Windows Vista+/ etc. Typing a name will pop up a list of results from anywhere in the index matching a substring there. Pressing enter will automatically play/show the most relevant file.
Any ideas? I want the focus here to be simplicity and ease-of-use, NOT features. iTunes, real player, even YouTube, etc. tend to like to be at the forefront of user attention. I'm looking for simple and streamlined.
I would argue that the simplest approach would be to use the design most are familiar with: a treeview on the left for folders with a collection of thumbnails for the current folder on the right. In addition for video, you could make the thumbnail play (either the video in its entirety or a small representative clip) when the user selects it.
There's nothing wrong with leveraging design that already works. It makes your application more approachable for new users and thus increases your attach rate.
Look at Infragistics' Quince app for more UI Patterns. In addition, there is Jennifer Tidwell's book "Designing interfaces" that provides a great reference.
Related
I am building a wpf user control to provide navigation facilities for database records.
The control is provided with a set of default images (as illustrated above) which the end user can change is they so wish. In addition the end user can choose to dispense with images altogether. In the event that they select that option (for either one or all of the buttons that comprise the control) I have provided some default fallback text.
This text can also be overwritten by the end user if they so wish, but the default text at least provides them with some basic text that essentially conveys what the button does and saves them having to add text every time they use the control (default tooltip text is also provided).
Now if you happen to speak English, or your intended target audience is English this should work, but it doesn't really cater as is for languages other than English. This I would now like to change.
What reading I've done on the subject of multi-lingual resources and wpf seems to assume that one is talking about the overall application rather than a standalone user control that might be used in different language environments.
I had a talk with a creator of controls who said that making this multilingual would probably involve building several copies of the control for each intended language.
In the light of this I have two questions. Was the gentleman I spoke to correct, should I in fact build multiple copies of this for each language, of is there a way to have multi-language resources within the same copy of the user control?
If the latter is possible what is the correct way to go about achieving this. We will be dealing in total with default texts for eleven buttons (which I will need to be able to refer to in code within the control incidentally) and default texts for thirteen tooltips (which again will need to be able to be referred to within the code of the control).
Take a look on WPF localization extension.
Here's a pretty good documentation for it: link.
You can define your controls' localizable properties, which store their localized values in the satellite resource assemblies.
In your xaml code, define the localized properties with xaml extensions syntax:
<Button Content="{lex:Loc Test}" />
Then, create resource files for each culture your application will support and give them the same name as the main assembly plus the general or specific culture code (e.g. en-US, de, de-AT, ...) before the .resx ending yielding: AssemblyName.CultureCode.resx.
Now, populate the resource files with your localized properties key/value pairs and build the project.
You're done!
Background: I'm currently developing the client side for a web application, using JavaScript, with jQuery and Backbone.js (these are required by the proponent).
This is an application to visualize and edit data, in a graphical mode (through interactive diagrams representing the data, mainly).
Terminology: Said data is under the format of multiple documents, each containing a list of items.
For the purpose of this question, let the items be composed by an identifier, a textual description, and links to items in other documents. Links should be symmetric (i1 -> i2 exists if and only if i2 -> i1 also exists).
The Current Goal: In this phase, the application should be able to read two documents, display both lists side by side, and then draw lines, connecting the items between both documents, according to their links.
These lines should be editable. In other words, the user should be able to create new links, or remove existing ones (reflecting the changes on the item models).
These documents can be somewhat long, say, some dozens of items (maybe a few hundreds, in a realistic scenario). Of course, the page will be scrollable, to allow the user to see everything.
Also, for user convenience, there should be a slider to scale the view (allowing zoom in/out effects, so the user is given a global and a local view, being the latter more adequate for editing and the former for analysis).
Furthermore, the user should be allowed to hide particular items (useful when an item has many links, creating visual rubbish).
What I've managed to do:
Read data and map it to Backbone models and collections;
Display both documents side by side (Backbone views), with item connections;
Allow interactivity on these connections (drag-and-drop to create lines, click to remove), reflecting changes on Backbone models;
Hide particular items;
Scale effects.
I've achieved this using SVG, after coming across jsPlumb.
The Problem at Hands: The application still needs adjustments (emphasis on the scaling effects). Regardless, I found jsPlumb to be comfortable to work with. However, rendering performance seems to be a little lacking, when using the slider (it's possible that the slider steps are too small, thus firing too many events).
The proponent suggested that I try, instead, Sankey diagrams, to represent this kind of data. They also suggested that I try Sankey by tamc, based on Raphaël.js.
Of course, the visual factor is also contributive.
My question(s): Does this library have a good compatibility with Backbone? Possibly, if I use the resulting SVG elements as Backbone views' elements.
Also, does any of the two have a significant rendering performance advantage over the other?
On a final note, are there any other libraries more adequate to this scenario, worth the time of rewritting the application, that I might suggest to the proponents?
The project is going on, and I ended up using Sankey by tamc, with some extra work of my own, to better adapt it to this particular case.
What do people think about using pretend hyperlinks, in Winforms apps?
Example:
In my example you would click "into" the Organisation record card for Acme Corp Inc or "into" the details of the next appointment.
If we ignore, for the moment, how the user edits the Organisation or adds/removes an appointment, is it a sensible UI in Winforms to use blue & underline to signify click here and i'll take you to a new screen
As in:
TextBox1.Font = New Font("Blah", 8.25!, FontStyle.Underline etc
TextBox1.ForeColor = Color.Blue
Not forgetting:
TextBox1.Cursor = Cursors.Hand
This would be for a reasonably rich application (for example a CRM) where you have a lot of different kinds of screens and the user is navigating between all sorts of records. And you want to show the user that he can navigate between detail views, grids, children, parents, siblings etc.
Pros:
it's familiar to users and it's
obvious, without being obtrusive or
taking up any screen real estate
easy to implement
the often-used alternative (a button
with an icon or even just three dots
[...]) looks a bit old-fashioned,
doesn't work very well in grids, and
takes up space
Cons:
with all the flexibility and control
you have in a Winforms front end, you
should be able to devise a smart ui
without needing to borrow from
browsers (maybe???)
these pseudo links won't behave as
true anchor tags (there won't be any
"visited" [ie. turn me purple if I've
already been in here] or "hover"
behaviour and no open-in-new-tab
features, without a lot of work) ... potentially annoying to users?
detracts from genuine hyperlinks (as
in email addresses etc) - these no
longer stand out as links "out to
the internet" (to the browser, to
email client) ... very minor issue?
Not even browsers work this way. Use a LinkLabel, not a TextBox.
In general, it’s a good idea to use hyperlinks (real or simulated) in thick-client apps for opening forms of additional information. It is helpful to distinguish between a control that merely navigates (a hyperlink) and a command that changes the underlying data (a command button), so the users know what they’re getting into. I don't think most users care (or even know) if a browser is involved or not. Navigating is navigating.
Making an attribute value look and act like a hyperlink like you’ve done is fine except for one thing that is a showstopper for most applications: it precludes any other interaction with the attribute. The user can’t edit or even copy the attribute value since any clicking in the field will launch the new form. Keep in mind that to edit a value, such as to correct a day of the month, the user may be inclined to click in the middle of the field to position the cursor. Even if you’re using a drop-down menu (e.g., to set the organization), you want to allow users to click in the field and select by typing the first few letters of the value they want. If your app has one drill-down-able field that needs to be editable, then for internal consistency none of your fields can use hyperlinks –all drilldown needs to be by some other method.
Also, while hyperlinks are intuitive for navigating, such as drill-down, I’m not so sure they’re good for assigning a field value. There is a difference between getting more information about Acme Corp organization (which is what your Acme Corp link implies) and getting a dialog to pick the organization for John Smith (an assignment function). So if your intent is assignment rather than true drill-down, then links are probably not a good idea. For assignment, the button with the three dots makes a lot of sense. Assignment changes the underlying data, so it should use a command button. It’s a natural extension of the button in a dropdown control. The three-dot button caption minimizes the space used and is associated with dialogs since that’s what they imply in menu and button captions. It might look old-fashioned, but that’s why it works –it’s consistent with past user experiences.
Looks okay to me. The concept of links has anyway already migrated from web to desktop applications. Users should accept this without problems (maybe after first ten minutes playing out with your program).
Also quite popular in enterprise applications.
Maybe consider changing the color, to, maybe brown or green, so that it doesn't immediately imply a native web link.
Also many web applications built with some event-driven frameworks (like ASP.NET WebForms, JSF etc.) heavily use links that do not link anywhere but invoke some server-side processing (basically an event handler). So it's not unusual use.
I don't like it. If I see a link I expect it to open a browser window when clicked. More standard would be to have a little "edit" button/icon next the label. You could get away with having a link-style "(edit)" after the text, that would also look quite normal rather than suggesting a browser is involved.
e.g:
Organisation: | Acme Dustbins (edit) |or
Organisation: | Acme Dustbins| (edit)
I'm developing a Winforms application which has been running for years with an explorer view (TreeView left, screen right). I means that:
All the screens have an hierarchy organization
All the nodes on TreeView have one and only one screen related.
A screen gets activated when a node on treeview gets selected.
One of the advantages is that the user has an ordered stucture and one of the inconveniencies is that with hundreds of screens the user gets confused.
I see other options: use classical menus, use tabs or a mix of everything.
Any advice for a good way to show a lot of screens to user in a user-friendly way?
Update: I'm changed "hundreds screens" by "a lot of screens". The most important thing is not show all at time but that the user can find what they need easily.
Update2: In this proposal, the user only see one screen at time.
Update3: I'm talking about handling multiple screens not showing multiple screens. No MDI, only one ontime.
I have used other applications similar to this is the past, and the major problem is trying to find the exact screen you want. There are two common solutions to this problem, shortcut codes and favorites menu.
With the shortcut codes, allocate a short code (5 or 6 characters) to each screen. The user then inputs this shortcut code into a text box which will then jump to the correct screen. Users will create their own list of often used codes.
For the favorites menu, allow users the ability to be able to create their own menu list in the structure they want. They will find things easier, if they organize it themselves.
Why do you need to show so many seprate screens at once? Why not just show the screen for the currnetly selected node, why are all needed at once?
If it is all tabular data is is probably too much to be consumed all at once, if it is graphical data, could it not be combined?
There may be a valid reason to show all the data at once or there may not, hard to tell from what is provided in your question. With that said, better to keep it simple than overload the user. MDI apps are never easy to use.
Tabs may work for a small set of items but still is not a good UI for hundreds of items.
If you are only showing one element at a time, out of hundreds possible on the tree nodes, then that is fine. The one screen showing at a time would be contextual to the item selected as the user moves through the nodes. Think of the Outlook approach where what is selected in the left pane is displayed in the right pane in whatever form fits the data being displayed.
Have you considered the Office Ribbon?
The Ribbon gives you a lot of flexibility on how to show and
organize functions and it's highly visual.
Here is a good link about the Ribbon and also here
To use the Ribbon you have to license it from Microsoft. You can do that online.
Providing the user with ketboard shotcuts is usually a good thing too.
I also like to provide the user with an "autocomplete" field on the menu
so that they can can find the function by name (or part of it) and be
able to navigate directly to where they want to go.
I general I find trees to be a bad idea, especially if your "hierarchy" is of a small fixed depth.
If you have a small fixed depth, consider replacing the tree with a list. At the top of the list can be drop-downs for filtering based on the node-level properties. It will use up less screen real-estate because it is vertical-only, with no horizontal component.
Clicking on an item can display it in the view (like currently), but it may be a good idea to allow a user to double-click on more than one item which could launch more windows, or tile with the existing displayed items. (I am assuming that currently, the user only sees a single detailed view at once in any given window.)
Actually, it’s hard to beat a hierarchy for organizing large numbers of items. I wouldn’t favor a classical pulldown menu for vast numbers of windows because it would be even harder to keep track of where you are than in a tree (e.g., a tree lets you look in multiple branches at once). But here’s a few alternatives:
I’m not clear how you ended up with so many windows, but maybe it comes from combinations of classes, views, content, and detail, or maybe it comes from using a task-centered UI structure for something far too complex (I’ve more on that at http://www.zuschlogin.com/?p=3). For complex apps, you want a different primary window for each significant class of data object (e.g., invoices, employees). These are listed on one menu, and typically there’s few enough (15 or less) that it can be single non-cascading pulldown menu. The content of each window is set by a separate menu, perhaps by a menu item that opens a dialog that may include a list box (like an Open dialog) or other controls for querying/searching. The “view” of each window (how the data objects are shown, e.g., table versus form) is set by menu items in the View menu. Details for any given object in a window can be shown in a separate pane within the window in a master-detail relation, essentially turning you data objects into a menu for details. A single window can have multiple detail panes for the user to open and close to select the specific detail to show. Tabs may also be used within a single pane to fit subdivisions of content.
You say it’s not important to show all window options at once, but often showing all options at once makes it easiest for users to find what they need. Maybe you need a “home” window that lists all the other windows in organized, labeled, and separated categories. This is will be easier to use than the tree if your users select a window then stick with it for most of the session. Your tree is better if there's frequently selection of windows throughout the session, owing to the overhead of getting to the home window. If all windows/options don’t fit on a single home window, then show only selected common windows for each category on the home window and provide a button or link to show an exhaustive list.
If you’re talking 100’s of windows, maybe you should have Search, perhaps in addition to a menu-based browse approach to getting to a window.
In any case, providing easy access to the few most commonly used windows is a good idea. Such windows can be explicitly selected by the designer, based on user research, or selected by the the user (favorites), but it also typically works well to make it automatic with an algorithm that uses some combination of frequency and recency of use.
What do you think is the best way to present a hierarchical list of functionality to users within your traditional WinForms application? (A menu system - Assume functionality can be split into a small number of modules and sub-modules but with no fixed depth in terms of those sub-modules).
Do you like the traditional drop down menu system, ribbons, docked toolbars, a treeview approach or any other innovative ideas?
An important thing to consider in your design is Usability vs Discoverability.
The best solution depends strongly on who you users are. The UI requirements for a kiosk application for tourists in a city centre are very different to those for a control screen at a power station...
I often have a toolstrip docked on top for those functions that is most used. And all other as drop down menues with hotkeys set.
If I have a list that can contain different types of items I use a bottom docked toolstrip that change its content depending on the selected item in the list. That way I only have buttons/icons that is relevant for the task and not a bunch of disabled buttons irritating the view.
I also add a context menu for the items that automagically fills with the same choises as the bottom toolstrip. That way I give a faster way to get to the "action" without having to move the mouse down to the bottom of the screen.
I really hate the ribbon-thing (as a user) so I dont use it as a programmer in my projects.
In my opinion the best way is to make sure everything can be done in several ways.
Menus
Keyboard shortcuts
Toolboxes ...
So the user can choose it's way around.
What I really like to see in more application is that a menu or option is directly attached to the selected item (control) a user is looking at. And of course the menu is in context with the given content.
I have implemented this in my open source project Monex and I really like using it myself. Just look at this screenshot.
You could always opt for the increasingly ribbon control. Microsoft/Office interfaces have a habit of becoming the user's expectation of norm (eventually).
Menubars, toolbars, and Ribbons are used for commands, where the user selection of an item acts on a data object displayed in the window or the application as a whole. Which one you use depends primarily on the number of commands in your app.
Toolbar alone: About 20 or fewer commands. Provide both icons and text labels for each command button. Represent the hierarchy by separators. Have no more than two levels –flatten your hierarchy accordingly.
Menubar with toolbar: Over about 20 but less than about 1000 commands. Up to twenty menu items on a single menu (using separators) is generally better than cascade menus –flatten your hierarchy accordingly. Common commands should have accelerators. Generally limit your toolbar to no more than 30 of the most commonly used commands, primarily commands otherwise only accessible from within a dialog box. Consider not having toolbar controls for menu items that have accelerators –one good means of expert access is often sufficient.
Ribbon: Over 1000 commands. A Ribbon is little more than putting different menubars-and-toolbars on separate tabs. To work well, the tasks associated with each tab (the top of your function hierarchy) should be non-integrated –users relatively rarely switch from one to the other. The Ribbon is also tends to be more effective for promoting discovery of advanced features at the price of discoverability and efficiency of basic features.
Check if items in your function hierarchy may be better represented as attributes rather than commands. Commands carry out a process, such as Open, Find, and Copy, while attributes change specific characteristics of something, such as Font, Size, and angle of view. Attributes are set by field controls within your window (e.g., text boxes, check boxes, and dropdown lists) rather than menu items, toolbar controls, or Ribbon controls.
A window-full of such field controls (or other representations of data objects) is a content block. Tree controls may be used to control what content block is shown. Like tab controls, they are preferred over multiple windows when the user frequently switches among the content blocks and does not compare content blocks. Trees are preferred over tab controls when the amount of content will not fit in a single row of tabs.
Do not have any empty nodes in your tree. Anything the user clicks on should display a full pane of content –flatten your hierarchy accordingly, even going to the extreme of using a list box rather than a tree.
If users tend to select one content block, complete a task there, then leave your app, then consider a “home” page displaying a full-page menu of all the content blocks, possibly spatially arrange according to your hierarchy, each accessible with a single click.
In my opinion there is no definite answer to your question. It always depends on the menu you are presenting to the user and the users that are expected to use the application
A menu with standard/common functionalities is probably best presented Office style meaning drop down menus or the new Ribbon style.
A menu with custom functionality and, as you state multiple modules and submodules with different depths, is often best presented as a TreeView-like menu.
Looking from the point of the user, a typical user will do just fine with a standard menu whereas a more advanced user won't mind more advanced features like keyboard navigation or possibility to hide/show the menu or dock it to the other side of the window.