The Bernard Group – Good UX

The Bernard Group’s website makes my job at work simple. If I need to order retractable banners, I can go to their site, plug in some information and immediately get an idea of what it will look like, how much it costs, and when I can expect it to arrive. It makes ordering incredibly simple.

What makes this site great is that everything is presented on the first page. Once the user scrolls down, they can find what they are looking for and begin customizing their design, upload their PDF and done. The overall design is nice as well, simple white and black for a clean, minimalistic look.

This slideshow requires JavaScript.

http://tbgprint.com/

 

Research. Apply. Document. #13 Signals and Cues

Signals and Cues

Discipline: Human Center Design

This slideshow requires JavaScript.

The home screen on my iPhone has a signal for which page I am on. It has 4 dots toward the bottom, and the dot is highlighted when I am on that page. The same is for notifications, on missed phone calls, mail, Instagram, Facebook, all these apps will use a signal similar to the red dot in the top right of the icon.

This slideshow requires JavaScript.

Duluth Trading Co uses a good job of signals and cues on their navigation. Click on the section you would like to view, and the signal is a highlighted tab with red text. This makes it easy for the user to view what section they are in. The navigation bar stays consistent by highlighting the tab you are on.

This slideshow requires JavaScript.

Above is an example of a cue on Netflix. When I scroll over a title, the title comes up and a play button appears. This gives me the cue that I can click this to play the video, and that my cursor is over this title.

Signals and cues are a great part of design, and can really help user experience and create less hassle for the user. It can be frustrating being on a webpage, and not knowing where you are or how much steps you have left if you are filling out a form.

https://adespresso.com/academy/blog/web-design-visual-cues/

Research. Apply. Document. #12 Page Fold

Page Fold

Discipline: Web Design

I’m a fan of scrolling, and page designs that use large high quality pictures and videos. A lot of the modern websites use almost the whole page with an image or video, and encourage the user to scroll, or offer a visual cue on what to do next. A great example of this is Great Clips website. Majority of users for the Great Clips website are going to find a store, or check wait times. Right when you get to the site a video automatically plays and at the bottom it says “Find a Salon or Check-In” and the user can click that and the page will scroll down to a map with nearby salons and wait times. It looks great, and is incredibly simple for the user. The content above the fold for Great Clips, give the user a great experience and is very user friendly.

https://www.greatclips.com/

This slideshow requires JavaScript.

Studies have shown as well that pixels above the fold are viewed 84% more than pixels below the fold. The image below is eyetracking from 57,453 users. This shows how important the design above the fold is and how to interact and direct the user to information. For more information on this study, follow the link below:

https://www.nngroup.com/articles/page-fold-manifesto/

aggregate-heatmap-all-non-search-pageviews_1

 

This slideshow requires JavaScript.

Research. Apply. Document. #11 Multi-Touch Gestures

Multi-Touch Gestures

Discipline: Human Computer Interaction

Screen Shot 2017-05-31 at 7.08.36 PM.png

Multi-Touch Gesture design has really grown in the last few years with the rise of mobile devices and the use of screens. The touch gestures have replaced the use of the mouse for a lot of mobile devices like tablets, ipads, and mobile phones. This design allows the user to interact with the app or webpage, and can enhance the experience.

The above picture of the mobile game “Ballz” which has a quick gesture and text for how to shoot the balls, and with one swipe down, I was playing the game and easily understood what to do. This is an example of one of the benefits of this design, and how easy it is for users to understand. The visual cues, and animation quickly teach the user what to do.

Another benefit to the multi-touch gesture design is it can save screen space. Using gestures for navigation would save screen space, and create more room for the user interface. I see nothing but unlimited opportunity with multi-touch gesture design, especially with the younger generations already experts at touch screens and what to expect.

https://www.smashingmagazine.com/2017/02/touch-gesture-controls-mobile-interfaces/

https://medium.com/@muditmittal/slide-a-multi-touch-gesture-7c6686b5b170

Majestic Oaks – Good UX

This would be an example of something that doesn’t look the best, but the functionality is great, and very easy to use. Simply click the date you would like to golf, see what rate you would be, and then scroll down to an available tee time you would like. The drop down menu in the top right is easy to set which course, and find times. This is an updated way to book a tee time compared to what they had last year, and it is so much better and makes it easy to book a tee time. The UI could maybe use some designing, but from a user experience it is a great way to book a tee time quickly.

Letterman Sports- Bad UX

Letterman Sports has a great idea on their site to manage orders for teams and leagues that they do custom orders with. I’m not sure how it looks while the ordering window is open, but for our hockey league I checked and saw blue text over a blue background. The main copy is unreadable until I highlighted it with the cursor.

The rest of the website seemed ok, and had good use of hierarchy, and call to action buttons, but this “Important Alert” really stood out, but in the end I found out I can place an order on the 26th so it’s good they still post that information, but unfortunate it is hard to read.

https://lettermensp.tuosystems.com/login

http://www.lettermensports.com/assoc-page.html

 

Research. Apply. Document. #10 Entry Point

Entry Point

Discipline: Interface Design

The entry point is the design a user will first see when visiting a site or opening an app. It is the first impression, and can set the overall feel and tone of what a user should expect. The entry point should have a good use of hierarchy, and a layout that allows the user to navigate to what they are looking for.

CCM has a great entry point for their website. The hierarchy is clear, and the contrast from the image and nav bar work well together.

Screen Shot 2017-04-30 at 7.41.23 PM.png

Crate&Barrel also has a great entry point with their use of hierarchy and navigation bar. It gives the user an organized feeling, and allows for them to scan or search to find what they are looking for.

Screen Shot 2017-04-30 at 7.40.41 PM.png

Kohl’s is pushing the limit with their entry point. It looks busy, but they do use good hierarchy to get their deal across, and the options have a nice layout.

Screen Shot 2017-04-30 at 7.51.57 PM.png

https://www.smashingmagazine.com/2015/02/design-principles-dominance-focal-points-hierarchy/