A bit of a random questions but here goes.
I am re-developing a website to be mobile friendly and it has a massive form with lots of <input /> tags. as I Was researching similar sites and there solutions I found that <select><option>... are a bit intrusive and radio buttons worked better for me.
As this will go in a report I don't think saying "the best input method is radio buttons as I like then" will cut it somehow. does anyone have any good suggestions on what is the "best" way? OR is there a way of getting a vote going?
any help or direction is (as always) appreciated
Update: As I think of it, smart phones convert a drop-down list into a set of radio buttons and shows the user that in a similar popup/dialog box to the keyboard. is this a good excuse? hehe :)
This is a UI/UX consideration, plus you have to take into consideration if more select/radio options will be added in the future.
If there are more than 3 or 4 selections I would make those elements selects from a UI/UX standpoint.
Mobile browsers have no problem displaying any sized select, there are some jQuery plugins that you can find that will offer alternative interactions.
If more select/radio options are going to be added down the road (from a database for example) then radio buttons won't be a good choice. Nothing like trying to select from 15 radio buttons.
In the end I prefer to let the browser take control of the select and display it to its default setting. Trying to style over or replace a select with a third party solution can get a bit sticky when going cross browser.
Hope this helps to answer your question.
Related
I'm a graphic designer/web-UI designer by trade but have some (albeit limited) knowledge of Access. I haven't used it for a few years now but have been asked by a company to redesign the front end of their split database that was built using Access 2010. They had a programmer design the whole database, and it works well, but they do not like the actual appearance of the front-end so they have asked me to update it with some 'modern design' so-to-speak (i.e. stylise the buttons, fieds etc.)
I'm just wondering, what options do I have with this? Is there any way to use CSS as such to stylise the front-end? Or is there any built-in design tools that are useful? I plan to produce concepts using Photoshop to show them but it's knowing the limitations of what can be done with Access in terms of the front-end design. Any help would be appreciated!
It can be done, but it's a major task because Access isn't designed for developers (not to mention graphic designers) but for superusers. Thus, tools like you have in, say, Visual Studio, you can only dream of.
But if you are prepared to spend hours with alignment near pixel level, it can be done - as you may get an impression of from the screenshots here:
Modern/Metro style message box and input box for Microsoft Access 2013
Indeed, design of subforms is a challenge as these are offset a few pixels when embedded in the main form; if you are to accuracy to the pixel, this will hurt your eyes. Also, listboxes have a habit of shift their layout slightly when required - just to mention a few of the tasks you will encounter. In fact, once you have made some neat forms and controls, the only tool you have to ease your work, is to copy and paste these when you need a new form or control.
The icons are from the SyncFusion Metro libraray, colours are strict to the MS Metro/Modern palette, and fonts and proportions are as close to the Microsoft design guide as possible. This was chosen for two reasons: First, the design guide is so thorough and well thought out, and second, I had no reason to believe I could do it better. That may be different for you, of course.
The application was for a custom project, and users' response was positive only, even from Mac users (using Remote Desktop) - they love the colours.
Access is built to be GUI-intuitive. There's no 3rd party tools to "pretty" it up, only to improve the functionality.
That being said, there's plenty of stuff you can do to improve the look of it. Drop an Option Group down, delete the label, change the Special Effect to "Flat" and the Border Color to dark blue and you've got a nice little box to keep relevant controls grouped together. Utilize the Back Color of the form to give it a little more appeal; I always find a softer "slate" blue looks appealing and professional. White or soft yellow text looks nice on that background.
Add a label that stretches all the way across the top of the form. Make its background color a darker blue and center the text for a very appealing "header" for your form, or you can do the same thing inside those option groups I mentioned above.
Most coders I've ever worked with were pretty happy making dull gray forms with non-aligned textboxes and calling it a day. Take a little time to snazz it up with a few ideas I've given (and any you can make up yourself) and it goes a long way towards presenting an application that people don't dread using.
Here are few other UI components that "..are possible" without installation GitHubPage
I'm currently working on a project and I'm interested in having a sort of "elevator pitch carousel", a feature as seen on websites like www.salesforce.com. I took a look at their source code, but I'm relatively new to HTML and CSS editing I'm pretty confused as to how to go about this.
I don't want something that is exactly as salesforces, but just generally a way how to make text in a text box change after a person presses particular heading option on the top of the text box.
Hey you can accomplish this using javascript tabs. Bootstrap has some pretty simple ones to implement and there are other jquery plugins that would do the basic thing. You will need to edit the css to get the appearance you want here is a link to bootstrap 3 and their tabs feature.
http://getbootstrap.com/javascript/#tabs
some other tabs plugins
http://www.unheap.com/?s=tabs
hope that helps
-John
I am developing a web-based menu application targeted solely for Mobile Safari on the iPad (in other words, I am not at all concerned about cross-browser compatability). I have a form select box which contains a number of options the user can choose from to modify their order, which when clicked displays on the iPad as follows: Screenshot
The problem is that this box is not wide enough to show the user the price or even the full name for several options. Smaller names is not a particularly attractive option in this case. Is there any way in which I can either a.) set the width of this box (doesn't matter if it's a Mobile Safari-specific solution!) or b.) make it so that the box grows wider to accommodate the widest option? I can find nothing on Google that deals with my question save for one forum thread with no useful answers.
Javascript is an option, if necessary.
Thanks!
To the best of my knowledge I believe UIKit entirely with the popup. The only advice I could suggest would be to implement it solely in JavaScript. I've had a quick Google and nothing is coming up that stands out as a existing one.
I hope the question police have something better to do while I can get some much needed information.
I try to do my HTML and CSS on firefox using the Web Developer Toolbar addon. It saves a lot of time but I have a very simple question. I have searched all the options in the addon. Is there a way to get this thing to pop-out like firebug. Cause it takes up half the screen while doing the page and that becomes a pain really fast.
I know its a very simple question but if you can help me out, thanks!
I played around with it and it seems you are right. It doesn't have a "separate window/tab" feature. But here are two thoughts for what they're worth.
I assume you have dual monitors cuz of your question. There's a [position] icon next to the "Edit HTML" and "Edit CSS" tabs. (it looks like a lil window with a green arrow. Click on it to reposition the editor to the left or right of your browser, then minimize FF and stretch it across your monitors :D haha! but seriously, I tried it and it works perfectly!!
Lame answer: If that doesn't suit you, ask Chris Pederick on the WDT forum: http://chrispederick.com/forums/
Good luck!!
I need to create a dropdown, which can contain 100s of options.
I need a scrollbar to appear and be consistent across all browsers.
Google came up empty: Is there a good URL that describes if this is consistent or not?
I would strongly recommend against having a scrollable select with 100s of options for usability reasons.
With exception of one corner case, navigating (both searching in, and selecting from) that list is a really really hard and very annoying to the user.
The UI design reasoning is that it requires:
Wide mouse gesture (tiring), followed by immediate precise stop (hard to do because of inertia)
Very difficult to use interface of a scrollbar (extra crap points for scrollbar being in the middle of the page instead of on the right side) - see Jacob Nielsen's and others' usual ranting about difficulties of using scrollbars and general evil of anything too long that requires much scrolling.
Eyes need to scan whole page worth of menu up and down and back, all the time. very tiring.
Here is a set of bad examples
[ the corner case is when all the option names are uniformly distributed across the alphabet (as far as the first letter), which allows somewhat-possible keyboard-only navigation in the drop-down via pressing the first letter of an option ].
A proper UI solution is to have a select whose contents are dynamically populated based on a search field - either typed text (think Google's new search box, or browser's address bar) or sometimes checkboxes/radio buttons.
BTW, sub-menu solutions also suck for mouse navigation - minor twitch of the wrist and you lost all of the pointing work.
I apologize that this answer is not an answer to "how do you solve my technical problem", but I am of a very strong opinin that you're solving the wrong problem in the first place.
HTH.
The short answer is no, for the standard HTML select element and the requirements you describe.
However, do you know you can set the size attribute for how many rows are visible at one time? AFAIK this will force scrolling in all browsers, but it isn't a drop down. Like this:
<select size="10">
<option>etc</option>
...
</select>
There is also the possiblity of optgroup to split the options into categories.
If you have many categories you could do what I did on one site and use this jQuery click menu, using the click function to set a hidden field. So now I have a dropdown with sub-categories and it's quite easy to find the right option.