New answers tagged

0

There are definitely situations where the branding or the image of the company fits in quite well with the use of an animal or mascot as you have pointed out. All those examples are aligned to the company/business branding or image in some ways. For example, MailChimp resonates with a personal touch that is also friendly, while HostGator is linking the name ...


0

Please have a look at both the screens, just my 2 cents User will click to the category (user data) to select, Chapters > Chapter 6 https://au.pinterest.com/pin/180284791312462804/ User can see which Category (Chapters), and "Chapters 6" they are in https://au.pinterest.com/pin/180284791312462809/


0

This really depends on the market, but our usability studies in the lab consistently show issues that Western 45+ y.o. users have with iOS standards, either adopted for web or used natively. And some of the Material Design standards. For example, they don't understand that a) or b) is a button. Based on this, I would steer clear of the latest standards ...


1

Firstly 45 to 70 is a massive span of target audience. They may be web savvy or not so inclined towards online buying (in specific context to India). Characteristics of a 45 something traveler is: budget is not a issue, planed trip for them is essential. Content guidelines: site has to be Content rich; location images have to be impressive, feedback of ...


0

Here are a few more facets to consider validating that your subset of older users isn't harmed by your UI or UX. Cultural references. You edit out language and symbols that don't translate cleanly by language or region. Do the same generationally. Check that you're not using verbal or visual metaphors grounded in the last five minutes. Cognitive burden. ...


1

I think the problem that user would face is inability to 'Quickly Refer' desired content if all the content is displayed at same time to the user. Displaying four long lists won't help. A tab based view would work better in this scenario. User would still have access to top level topics (Carbs, Vegetable, Proteins...) at one place and it would work ...


1

Switching between all circles and your circles is actually filtering results, so display the filters:


1

I think huge amounts of data are always difficult to display on mobile. You can think about displaying them in a table or as a list type. Tabs are not a bad idea for the four "categories" you have there for the nutrients. https://material.angularjs.org/latest/demo/tabs or https://material.google.com/components/tabs.html https://material.angularjs.org/...


2

I suggest you forget about minimizing the amount of clicks, specially on mobile. Number of clicks don't really matter if user knows exactly what (s)he wants. You can simply divide the content on pages, tabs or accordion menus. Must read: Stop Counting Clicks Must read: UX Myths


0

I would expand on your side bar idea but keep it hidden instead of fixed. This would save that valuable horizontal screen space. Maybe have a tab like so: The tab could be moving subtly or have a subtle color change to indicate its importance. When a user wants to make a selection/navigate to a different section, they would click on the hamburger menu ...


1

Do you think this could work? Consider that rectangle a variable space or column. I didn't make the complete animation but I hope it will give you an idea.


0

If you're building a form, why not simply let the other chosen options dictate the column sizing? For example, I need a form that has... 6 text input boxes One set of radio buttons (5 total options) A large text box for an extended response I want these to be split into two separate columns, and I want the ability to arrange/order them in those two ...


1

Can you just make the edge draggable? You could have notches in the dragging if needed. Any JS library has a drag edge feature. http://jsfiddle.net/euka4rm3/ For notches here is an example, just imagine the draggable element to be the whole border. https://jqueryui.com/slider/#steps


1

If you expect users to search for pricing instantly it's a good idea to show them Landing page. It could also be that the pricing IS one of your USP's (i.e. cheapest on the market). In that case it's smart to be proud of your pricing and show it off on the landing page. In that case you would be introducing another step towards finding the information by ...


1

So you're asking if you can use the breadcrumb model/pattern for a payment/checkout process? It would be nice if you could show your designs or at least link to what you have in mind. Strictly speaking, Breadcrumbs wouldn't be suitable to a checkout process (think Amazon checkout) since Breadcrumbs only display your history, not the full process. Unless you ...


1

Solid understanding of typography may help you because there is more than one way to improve readability and make it easier to scan the page. The following article has some examples which illustrate how use of colour, font size, font case, spacing above and below, etc can all help titles and subtitles to stand out (this helps you to scan): http://retinart....


1

EDIT: Updated mockup based on feedback: Since you are simply retrieving and displaying this list, I would do something like this: The current checkbox-like icons look similar to input checkboxes, so I think removing them will help eliminate the misconception that the services can be changed. This is especially apparent and helpful if no services are ...


2

How about this way: change the icons so that the unavailable services aren't checked. put all the available services up to the top and unavailable services to the bottom. Good luck!


0

It will reduce comprehension of the elements which use uppercase text. If you want to know why, Google the Gestalt school of psychology which deals with the principles of perception. It probably wouldn't reduce the overall comprehension of the site - but best to be on the safe side, eh?


8

There are already many studies conducted about text readability regarding all caps and the likes. The Nielsen Norman Group has written about this in many articles, stating Reading speed is reduced by 10% and users are put off by the appearance of shouting. Source Short answer: Regular words and headings shouldn't be capitalized for readability. This ...


2

Both answers here are great, however I'd like to add if you're considering Usability, consider to weigh the factor of Colour Blindness as well. There's a great chrome app called Daltonize: http://www.daltonize.org/2010/05/chrome-daltonize-color-accessibility-in_13.html It's also quite useful to test contrast levels.


1

I agree with the other points here. Contrast is very important. You can review a guide for Web Fonts to review or learn more about how to create a strong typographical design in this medium. One thing designers forget is to make their website usable and accessible to all people. If you lack contrast, your font may to lost or submerged. You can always check ...


0

You can try http://clueapp.com/ http://www.bounceapp.com/ http://www.reelapp.com/ all by Zurb, all of them free. They don't have a lot of users though, and quite probably you'll need to try their paid services if you want some real feedback. Otherwise, try 22 Web Design Critique Websites To Help get feedback, although most of the sites listed are dead, ...


0

One of the things I do on a daily basis is check out sites like: http://www.awwwards.com/ http://www.cssdesignawards.com/ These sites are updated daily and show trends on web technologies. Others vote on Design, Usability, Creativity and Content for each site and you are able to see what it is that people are working towards.


8

While the final color combination will depend on the UI design, branding specs and other considerations, the keyword is CONTRAST. and as such, you're on the right path, black on white is the maximum contrast you may look for. However, there's another consideration to keep: eye strain. Undoubtly, staring at a pure white screen for a long period of time will ...


1

As was pointed out in a comment, I would revisit the idea of using a multiline text field instead. I'm sure you can find a way to watch for changes -- for example, on Android, there's a TextWatcher class you can use. Another option is to make the field look like a text field, but open up a dialog when it is clicked. If you still opt for an edit button, ...


0

I would have it break under the text area unless there are other form items that may be edited in this fashion. In which case having it flow in line like that is great. If this is a standalone text area then break it to the next line.


1

Assuming I'm understanding the situation correctly, I will propose a few options 1) the best interface, is NO interface.. by detecting the browsers user-agent, you can determine what type of system they are on (and POSSIBLY skip one of the tab bar selections). I understand that you may not be able to do this in ALL cases. It will be VERY rare that someone ...


0

You can consider a new tab for a "micro site" within your site or if there is a very direct conversion funnel you might like to try and take the user down.


1

On this website it gives some info about screen resolutions http://www.websitedimensions.com/ According to that stats the smallest mobile resolution is 320px - however as mentioned in the third table, the actual width(excluding browser's interface) in that case can be 310px in case of the link expires in the future, here is web archive link: http://web....


0

You kind of answered your own question there. Material design makes development easier because there are lots of guidelines and examples and references so you don't have to re-invent the wheel. And for end users it's something the likely (partially) are used to, so it takes them less time to understand the app/UI. The downside is that you'll have some ...


0

In my point of view, material design is awesome when it comes to clarifying the UI by mimicking physical properties on controls, toolbars, buttons and content. However, if not used properly, it can result in cluttered, distracting user experience. If your app is focused on interaction and requires user control (for example an alarm clock app), I would ...


0

One item can be added into multiple folders If the item is not duplicated when added to multiple folders, then it sounds like you're talking about tags, not folders. I think this might be easier if you think about it as tags, and filtering the listings (similar to faceted navigation / etc).


2

Everything depends on purpose of Website. What all information or content present on website decides footer Links/Content. But am not here to just say "depends!" So presuming your friends' startup would need the website more importantly for media-marketing and is not website based startup(guessed from number of pages). Rule of thumb for UX: More ...


2

If the information is duplicated in the footer, it becomes redundant. So, scrap it. You're right. There's no point in showing everything twice.


0

You are right; this is a bad idea not only UX wise but even later at tracking and analytics. From the user perspective, this approach isn't user friendly since the user would most likely accidentally click somewhere on the page only to be redirected to a page he isn't interested in. This would be frustrating for any user. From the client side, it would ...


1

More importantly than the way of presentation is the portfolio development itself, which touches more complex issues like your methodology as a UX designer. A good methodology could be the following: you start mining for an online business that could use your help ideally, that business should have the exact issues that you can fix. Think of it as a ...


0

I am not 100% sure what data you are using and not using, but is sounds like you capture data at some point from the user then you are asking the user to input the data again. If you have this data already recorded you can display the data to the user. Say you ask for a users name on one page and the user gives you there name. and on another page you have ...


0

In my opinion, you could use a concept like able/disabled. In other words, you could represent the requirements no longer required in a faded-out, "disabled" mode.


3

Yes, background and border on each component will definitely make it more visible, like on this dashboard sample. You can also check this blog post for some guidelines on how to design dashboard user interfaces, which is the best candidate of what I am seeing from your screenshot.


0

I think one reason the browser doesn't intervene at that stage with a standardised message is because it would never look the same as the site you are currently viewing - it wouldn't be seemless and therefore could actually be detrimental to the user experience. To the user, it could look like you have been redirected to a completely different website, with ...


1

The answer depends on how central location is for the service. In this case, online classifieds, it is likely to be highly localized information. Where the showing is, where the seller is, where the business is... distance from the reader to the advertiser is often critical. Thus a separate UI element that more clearly delineates the location of the ...


1

If the goal is accuracy and reducing errors, then the second one (dynamic dropdown lists) is better. If the goal is speed, then the first one (let user type) is better. There is lots of articles online about dropdown lists not being ideal. The main reason is that it takes a (1) click (2) scroll down a long list (3) select. Most users can type pretty fast ...


1

The way ZARA does it is a great example: They grey out the sizes that are out of stock. They also show an email icon to indicate that a user can request to be notified if it becomes available again.


4

Density-independent Pixels Sounds like what you're looking for is Density-independent Pixels. Even though you might be working in @2x sizes, the final result is the same. The code will remain Font-size: 24px; on desktop and mobile. The higher density screens require specific solutions for visual elements such as images and icons, but not for the basic ...


1

To answer your question: Short answer - No. Longer answer - No, but would it help development if you provided more guidance? Not only will it probably help the team if you define some basic stylistic ground rules (do you even have a style guide?), and it will give you a sense of scale about how it looks and how it works. As a designer you need to have a ...


0

I try to follow a strict pattern using only pixels, percentages or em's, but it aways gets messy, so we end up using a mix of them. But thats not a big problem. So just go do your work.


9

I hope this answer this question, but this is my personal process: I use the font sizes in my PSD mockups for reference purposes only, almost as a 'relative' size. Then after Design is approved, along with the assets, I create a separate html / CSS basic file as a style guide (a bit like a style tile) where I define the real size for all fonts and see how ...



Top 50 recent answers are included