In my asp.net application I have a form where a user can pick a few skills (there are over 40) and per skill can define his skill level (value from 1-10).
My initial idea was to show 1 combobox with a slider next to it.
Everytime the user picks a skill a new combobox with all the skills + slider appears underneath it and the picked skill combobox + slider gets a delete button next to it, in case they want to delete the previous selected skill.
At first this seemed like a good idea, but now that I'm building it it looks kinda weird and not that intuitive.
How would you guys implement this?
Combo box for multiple selections with additional input is not a good idea. Can you list the skills ( I know 40 is quite a few, but it depends on the aplication usage )? Having a skill, with a checkbox ( that can be unchecked ) and a slider of level appearing to the side would be my initial thought.
Of course, UI design is very specific to a particular application and user base. Different applications have different requirements.
ETA - based on comments, the other option is to split the task into two pieces ( TBH, that would probably be a better and more efficient solution to this task. That is my PhD study area, so I might know what I am talking about ). Can you have one page to select the list of skills, and another to list the selected ones, with sliders on ( and "remove" options too ). From a useability perspective, I would think this might be easier.
Related
I am struggling myself thinking about which component to use in my new app.
The first screen I am using Collection View with big images. Once the user touches one cell, it goes to the second screen ... and here is the problem.
I have three columns, similar to a dictionary with first language, second and third. The user will be able to choose which column he wants to search, and according to his criteria it will show the result that matches. I am not sure how to implement this, which component gives the best experience to the user. Any idea is more than welcome. Thank you in advance. Alex
If your data is several rows each with 3 columns, I would recommend customizing a UITableView. I followed this tutorial when I was trying to set up something similar.
The Table View will also give you efficiency if you have a lot of data, and you can build the custom table cells in the interface builder so that makes life a little easier.
-Ken
This is a really basic design question, but I can't seem to find an answer. I'll use a really simple example, but my concern is for cases where the model-level calculations, "2+2" in this example, become complex.
Let's say I'm designing an application to run in Zope or Plone; its job is to add two numbers. Dexterity lets me easily create a content type with fields addend1 and addend2, and will generate add, edit, display forms for me. I could modify the display form to also present a field named "sum," but "sum" is a result of extensive calculation in my model, and I don't want to present it in the "add" or "edit" forms because I don't need that as input, just as a result of calculation. I don't want to calculate it in my view, because it's expensive, I'd like to reuse it after initially calculating it, and I don't want my "view" to need any knowledge of how I do my calculations anyway.
So what is the proper "zca"ish approach for doing model-work that has nothing whatsoever to do with presentation of results? Do I create an interface like ISum and create an adapter that converts my content type to one including a sum, then do a view for the ISum interface? If not that, what? Searching PP4D and the Zope 3 Developers Handbook hasn't helped.
Thanks in advance for any insights.
Use events; you can register event handlers for when your content type is added, or edited, and you set the value on the object whenever these events trigger your handler.
I am building a form for parents to enter health information for their students. Our nurses want to build it similar to what you fill out when you see a new doctor where they have categories and then conditions within the category that you would check if they apply to you. They want the number of categories and conditions to be variable so they can change them willy nilly as desired.
I need some ideas as to how to approach the UI side. My initial thought is a parent gridview with a row for each category and then inside that, a child gridview for each condition with its own checkbox. I already do a bit of work with gridviews and know how to access the nested objects so I'm not terribly worried about how to get the data back.
My question is this: Is there a better way and what suggestions would the community make that might be different or more efficient than using nested gridviews?
+1 for asking is there a better way?
What I'm about to suggest may end up being a little more complicated at first, but rest assured it will be worth it in the end.
There is a JavaScript framework named Knockout.js that is perfect for situations like these. Knockout vastly simplifies situations that where a variable amount of UI controls are needed.
http://knockoutjs.com/
Here is a tutorial on the website that has a similar situation to yours:
http://learn.knockoutjs.com/#/?tutorial=collections
everyone!
I'm working on a sort of AutoComplete component and faced one problem. When you create a new instance of a component, fill it with data - everything seems to be ok. When user types a letter in the inputField (and filter accepts one or few records) - everything goes alright, BUT if the first time user types a wrong letter (filter returned 0 records) - I'm getting a null-pointer exception.
This component is based on ComboBox. I have some thoughts about that: I suppose that the dropdown is not being created at time, any ideas on how to force my autoComplete to create it? I know 1 way - copy/paste some incapsulated code from ComboBox class .. but it would be too many of it .. I'm looking for a better solution.
Or, maybe someone faced similar problem and has the other way to go?
Thanks in advance :)
I can selfishly suggest that you try the Flextras AutoComplete Component. We have a Spark version available for free and an MX version which is a commercial component with an more expansive API.
Let me assure you personally that extending the MX ComboBox from scratch is a nightmare; and there are plenty of "oddities" that crop up with the drop down in certain situations.
We've been on the market for about two years, have dozens of customers, and have spent hundreds of hours on this component. I'm willing to guarantee that our component will be more solid than anything you can create in a week, and cost a small fraction of your time.
Check out the manual, samples, and other documentation.
We're currently working on a solution that involves managing a large number of parts for a project. In our database, we have a project table and we have a parts table. Those parts can be assigned to multiple projects and vise-versa. This is done through a link table.
We're happy on the database side and it wont be changed, however we're a bit stuck on how to display the UI in a user-friendly intuitive way.
There are about 6000 parts (...at the moment) and we need to be able to easily assign/unassign these parts from a project quickly and easily.
Does anyone have any good examples of this?
I have always found real-time filtering to be pleasant to work with and narrow down things. This can require your users to be somewhat computer literate though...
Furthermore I would consider something with D&D. I would imagine two lists (one with projects and one with modules) where I can multiselect on either list and drag a single item from the other list to that selection.
And if it is going to be an interface that's going to be heavily/repeatedly used, consider good keyboard support. Me personally find that repetetive tasks can be done MUCH faster if they can be accessed by hotkeys.
Just thinking out loud ...
There are two distinct parts to this. The first is selecting parts and projects from the database and the second is associating parts to/from projects. You should try to avoid doing both actions in a single dialog.
From your post, it appears that parts can be assigned to projects and that projects can be assigned to parts. So, a wizard approach might work:
project or part?
/ \
select project select part
| |
show list of parts show list of projects
| |
add/remove parts to project add/remove projects to part
When showing a list of projects/parts, use a simple, sorted list with a filter box. Using a tree or other categorised system can be ambiguous for the user. For example, if the list was of foods and there were categories for fruit and vegetable, where would you put tomato? A shopkeeper would probably put in in vegetables whereas a botanist would put it in with fruits. So, a simple sorted list with a search box (like FF's about:config) works surprisingly well.
I'd try a number of things, from a pure UI point of view, if your collection falls naturally into categories, I'm a big fan of cascading lists or a sortable, filterable grid. (or both combined)
Your choice will depend on your users computer literacy as well as space or technology constraints.
If you can spare the space, I think that two lists, perhaps selected items on the left, and the collection of items on the right with affordances such as checkmarks or >> << buttons are great.
I'd probably take a page out of Excel's book, it has some perfectly workable examples of this sort of thing.
I'd also take the time to add multi-level undo, working with large datasets is an absolute pain as a user when you have no recourse for simple mistakes, it should ideally track and handle whatever fiddly interaction your user needs to make.