Tag Info

New answers tagged

1

On a large screen, progress bar does indeed provide FF and RW functionality. This is not true for mobile devices with small touch screens - it is very hard to achieve accuracy better then 10% if video player is used in portrait mode using a finger and a progress bar. For longer videos (longer than half an hour) on such devices progress bar is nothing more ...


9

It would not be inappropriate to remove a dedicated fast forward (FF) or rewind (RW) button from a digital video UI. What are they designed for? FF and RW buttons were designed to move quickly through physical tape media. In the case of the image below a cassette tape, but they showed up on media before this. There was no practical way to move forward ...


0

If the GUI element will never be used, then it's MORE disorienting to the user to have them presented to him. Otherwise, whenever I'm faced with a question of the following form: Should I include GUI controls that will only once in a while be used? I start thinking in terms of supplying two modes, an advanced GUI and a more stripped down one. This ...


1

Even just 5 years ago there's likely be strong consensus that links are for navigation, buttons for interacting with data. But you won't find that consensus today at all. Today you're as likely to find a button for navigation as a link to interact with data. And that's OK as long as thought was put into it so that it is usable for your target audience. I ...


5

Don't highlight the row Table layouts present data cleanly using grid alignment. With grids, you don't need a lot of emphasis to draw a user's attention, so highlighting an entire row is overkill: it damages many of the benefits of a grid layout: The layout will depend on how you are using percentages If the user will need to compare percentages ...


0

You might want to consider a variation of bullet graphs for your list if you feel the red and yellow background colors are getting in the way of understanding the information. In the graph above, the black vertical line indicates 100%, the various shades of background indicates the various levels from the target. Use of shades instead of your traditional ...


0

Some thoughts on your questions based on my own experience (working on business web applications). Pagination vs infinite scrolling: Infinite scrolling is great for exploring. It is however not so great for content where you need to perform tasks on. See this article from NN/g: www.nngroup.com/articles/infinite-scrolling Pagination shows that the list is ...


0

I'd take google's inbox as a good example. Google drive works similarly but is much more sluggish. They have a search bar at the top and they load 30 or so results by default - if you scroll down you can see more, and they do it fast. Generally, with UI, you want to minimize the number of interactions required for a user to achieve their goal. Scrolling ...


3

Effective design is more important that exciting design If this is a system you want users to feel comfortable learning and using frequently, your primary goal should be to provide an interface (including a set of colors) that allows users to manipulate their cloud files as quickly and effectively as possible. Once that goal has been accomplished, you can ...


0

Don't create over simplicity that user can't find files easily (in your case) or can't differentiate different areas of your app.... Grouping similar items in grey boxes or showing active area of interaction with different background color is commonly used in APP UI Design Like in your example, i can only see two file types blue and purple, but what about ...


0

Differentiation is critical You don’t need “bright” colors to do it. In your example, the blue is nice and bright, but the view overall feels terribly monotonous and dull. It’s heading in the right direction with file type icons, but the impact is deadened because they’re all bounded by the same square of color (all but one). ...


2

Smashing Magazine published an article on mobile wayfinding that I think is pretty helpful: http://www.smashingmagazine.com/2014/10/13/wayfinding-for-the-mobile-web/ None of those solutions are wrong, but given the choice, I'd probably use the "nested doll" approach as my starting point. It's a familiar pattern on both iOS and Android and would eliminate ...


2

Userexperiencerocks website illustrate it perfectly like this, no software in sight.


0

Whether it is a product or a project, the UX should be identical. That is to say that, both product and project require the best possible UX, which comes from research and lots of testing. Just because a project is a 'one' time release, doesn't make it any less important to have a great UX. The main difference I can see in the UX process is that a product ...


0

Assuming users already entered the filter information before landed on the result page (e.g. most sites like http://www.hotwire.com/ have initial form before hitting the search page), it's unlikely that users will need to tweak the provided info again (look into your metrics if any). However, it is more likely for users to modify secondary filters that are ...


1

44px is the minimum recommended size for tap areas. https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/ContentViews.html As with all UI objects that users might want to tap, ensure that the minimum target area for each item in a collection view is 44 x 44 points. 16px is a default margin, from the screen edge, ...


0

In order to show data is related in the same table there is a 3 step process. Put the data next to the related elements (you did) Show some classification of which data fields are related (you did) Tell the user why its related! Because it may not be obvious See my design. You could alternate colors between the related fields and maybe when they hover ...


6

Your current approach is heading in the right direction. When your users use this data regularly, they will already know the relationship between the groups. Switching background color is one way of creating contrast between groups. Other ways would be to use line separators and white space. One thing you can have do to make it more obvious is by ...


5

Use grouping horizontal lines and eliminate the verticals one. Horizontal lines helps to lead the eye along the line, while vertical lines become a barrier along the eye path:


0

OK - so as mentioned in the comment above, my assumption that "every column in the set sits in the same row" was misguided, as was my trying to use the ux paradigm that we're used to for resizing say, columns in a table. Here's my working model going forward. Please note, I removed the UI elements for adding additional columns for clarity in this example. ...


1

Yes, it make sense ...if the only other choice is a 1-line input box. One line input boxes are terrible for editing long text (i.e. significant box overflow), for reasons that are almost completely obvious. They're bad on the web and even worse on tablets or mobile phones. If you have no other way to create space for the long paths, then a multi-line ...


1

Indeterminate checkboxes are not a good idea ...but if you must use them, the two common styles are shaded (windows approach) or dashed (mac approach): A key issue with the mixed/indeterminate state is that once the user makes a selection (checked or unchecked), you have to either: Provide a way for them to get back to the indeterminate state (e.g. ...


1

One option to show when a single user is logged in via AMcharts is their Step line chart. I am thinking of two states for the y axis logged in and logged out. And the X axis represents time (you could only show time when the events occur along with some references). See the following mock up The following is a similar design for multiple users (ie look ...


1

The most common way to represent a multiple state selection with a checkbox is to give it a dash. In the example below: all students have "Lorem" selected, some students have "Ipsum" and some don't, nobody has "Dolar". download bmml source – Wireframes created with Balsamiq Mockups In the case of radio buttons your best bet is to just leave ...


0

Don’t break file paths It opens up too much room for error. The same goes for URLs. Yes, it can be done, but I've never encountered a scenario where a better solution didn't exist. If your user is highly technical, they'll be familiar with long file paths. In my experience, they will prefer keeping it all on one line. They'll be comfortable with a ...


0

If you're going to allow users to place long paths, I would opt for a paste button of the sort. (make sure they can paste a long path in the text box). In many years using windows I don't remember many times where ctrl+v has failed me.


1

In response to your comments my answer is this. If it improves the user experience to be able to see and edit the file name and path by breaking it over multiple lines then I would suggest its sensible to do so. As long as you keep in mind accuracy. Perhaps a better suggestion would be to breakdown the file path into it's constituent parts and allow users ...


1

If there is a special interraction with this file path that start a special event in your application, you may make it larger. The multi-line choice can be confusing if the path is totally filled : So I do not recommend to make it multiline. If it is a common file path, moreover next to Browse, make it one line and aligned with the rest of the ...


1

I think icons are fine to a degree, however when you need to display information that isn't easily represented by icons, I'd revert to text. In use (sorry I don't have the same icons, hopefully you get the picture)


0

It's quite common on mobile keyboards now. Sort of. The line of suggestions is positioned horizontally over the keyboard not in the text. However, Victor's very efficient solution makes one assumption the everyday user does not agree with: that users want to type first and spell check later while editing. We aren't that concerned about craft, on the whole. ...


1

WCAG guideline 2.1 (Compliance level A - highest) states: Make all functionality available from a keyboard. If the function of the button and the dropdown trigger is different, users must be able to access both. So first "A" then "B" is the answer. Then comes guideline 2.4.7 which state that each should have its own focus indicator. I think your ...


0

Actually it should be "C" Reason: When you hit the Tab button the focus should be on the Primary Area, as mentioned by Alexey as well. But the focus should shift to another button on hitting Tab again and not on the secondary area. There is no need for focus to go on Secondary area. Because when the focus is on Primary, hitting ENTER should display the ...


2

The problem with the "split button" is that it is not just one control but that it is presented as one. I've seen people pressing the button while expecting opening the menu. Since they are seperate controls my first impression was to focus on A when pressing the tab key, and focus on B when pressing tab again. But I agree with @AlexeyKolchenko that it ...


2

The solution here would be to go for progressive disclosure where you first show the list of questions and then tell the user that he needs to select a question. once a question is selected, then you can show the related content. Here is a quick wireframe to illustrate the flow download bmml source – Wireframes created with Balsamiq Mockups


2

Its a nice question! I agree there is confusion among many people and drawing a line between all the branches is difficult. Reason being all the branches mentioned overlaps at one point or other. The answer actually lies in the names but due to their overlapping nature people do get confused. Even the companies while writing job descriptions. Understand, ...


5

You want to know whether to use a tab set or an accordion. Both are forms of progressive disclosure—that is, they reveal more content as needed. The answer is "it depends." It depends on how much of your audience needs to see the content, and how often. And it depends on how much content you'll be putting on each tab—especially whether the users will be ...


1

I would recommend sticking with Bootstrap as it is more design-agnostic. Use it as a starting point framework and build it to your design specification. Material Design is strong in it's statement about how everything should look, feel, and work. This is great for google to create consistency across it's products but likely not a fit for you unless you want ...


4

Material design provides the following benefits for web apps: It is a comprehensive UX + style framework, so it can speed up both design and development. It promotes responsive, multi-client user interfaces, in the sense that keyboard + mouse is a first class input method alongside touch and voice. So if you need your web app to work with mobile/tablets ...


0

Essentially the Material Design is a visual language developed for mobile and tablets. The very essence of it is "touch". Don't think its a good choice for web apps.


-1

I personally do not like material design on the web. If you look at http://inbox.google.com, they have used material design, but I believe it is confusing to get around and also a lot of space is wasted. It is frustrating when simple task like opening a folder requires an extra click. It is just not meant for desktop platforms to be used with a mouse (well ...


0

It looks abit crowded because you are showing all the information on the same screen at the same time. the screen shot isn't clear but it looks like you could replace the sequence of the same fields with an add button. Try to think in terms of when the user will need to use which block of information, and show clear navigation on how the user can pull out ...


1

I would suggest looking into a few of these design guides. Googles Material Design: http://www.google.com/design/spec/material-design/introduction.html Bootstrap: http://getbootstrap.com/ Either one is going to give you 'clean' web ready out of the box.


1

"What are the advantages/disadvantages of using caps for all words in mobile application design?" Do you mean ALL CAPS ALL THE TIME? Or Capital Case Only For The First Letter? Disadvantages ALL CAPS looks like you're SHOUTING! Bad if there's no semantic reason for this. Can feel like it crowds other elements, especially on mobile where space is at a ...


0

A thing to consider is that "design", when use as a form of communication, should ease the process rather than hider it. For that reason I avoid using all caps from a typographical perspective. As Bobtato mentioned, our brains read by recognizing the overall shape of words. Not necessarily the individual letters. One of the biggest challenges that all caps ...


0

I think that your project is okay considering general UI rules. Base and accent colors are okay too, but if you want more than a primitive windows shell, you need to know more about Design Language definition. If you use design language, all elements in your interface, such as button, font and colors will represent the unique part of whole general ...


1

I think its great. You should only add new colors when the new colors signify a different meaning of something. Also having too many colors can confuse users because they may be overloaded with trying to figure out why the color is different and does that signify a different/hidden meaning to the feature. A fair amount of users are color blind adding new ...


0

Friends. Colleagues. Developers. A carousel can be highly effective. Suppose your buyer is budget constrained and the bargains presented there are within their limit. Newegg DazStudio Nvidia Amazon. A carousel says "We're not sleeping" "We're still alive and kicking." "We're hep to the latest, greatest thing." "We've got great deals!" Otherwise, a carousel ...


1

Use the cursor if you can Image editors have been around for along time so this is a deeply tested approach. Image editing can demand a lot of concentration. Users who are focused on editing image details will have a very narrow field of vision, and will tend to ignore the periphery of a screen, so it's much more effective to have the cursor indicate the ...


0

Simply put, I'd do both. Give your users what they are already used to with the icon, and then implement the hover over change in the mouse cursor. This will give the user the best user experience.


1

In order to create an icon like that that would still fit into the notification area it would mean the text of your proposed icon would have to be even smaller than it currently is, this would make it incredibly difficult for those with poorer eye sight/smaller screen devices/lower resolutions to see what the value is. The advantage of the current display ...



Top 50 recent answers are included