Editor’s note: Contributor Marcy Kellar is a SharePoint Strategist and User Experience Designer. Follow her @marcykellar

Last summer, Marcy Kellar began a weekly series of her top picks of UX articles for that week. Marcy is going to pick up the series again so we’ve gone back to publish her original articles.

Here are the top 5 UX articles on branding this week:

1 - Complete Beginner’s Guide to Information Architecture

Information architects are more than just designers, visionaries, or project managers. Information architects must draw inspiration for perfecting their craft from a number of different departments. Typically, they will start as designers, or working alongside designers. At some level, the technical requirements of a sites design enter into their realm of interest and responsibility as well.

Marcy Kellar: Information Architecture is an important part of the User Experience. This is a useful article for those interested in Information Architecture or just beginning. It covers who is an Information Architect, what they do and what tools they use.

2 - Direct Your Audience To Important Content Through Visual Hierarchy

Every website communicates information through design. Some of the information will be very important and some not so much. Your audience won’t know which is which at a glance unless you provide cues for them by creating a visual hierarchy in your design elements.

Marcy Kellar: The visual layout of content can direct users to important content. This article provides helpful tips on creating visual cues so that users can find important content. The author uses his own blog as an example. The article doesn’t do the best job using relevant pictures but the content is still good.

3 - 40+ Creative and Best Landing Page Designs

Landing Page Designs - First thing you land on at what time you click on a advisement link is clearly your landing page. Landing page can make or break the image of website. If your landing page is high-quality and creative sufficient then only the visitor will stay for a while or will come back to visit once more.

Marcy Kellar:One of the best habits to get into as a designer is looking for inspiration. There are many places to look for design inspiration. I liked this collection because there were many design elements that were relevant to an internal SharePoint site.

4 - What the Heck Is CSS Specificity?

CSS specificity is a topic that many new front end coders avoid for as long as possible. It sounds complicated, there are all of these rules, you might even have to do some math! How lame is that? Ultimately, you can only avoid it for so long.

Marcy Kellar: CSS specificity is a useful technique in SharePoint branding and UI customization. I use this technique consistently when branding SharePoint. This article provides an overview of CSS specificity and provides several examples of how to use it.

5 - 9 Valuable CSS Tricks for Responsive Design

CSS also known as Cascading Style Sheets is now an integral part of web development as it allows developers to alter the elements in any web page, which were once impossible. If you know the correct source codes, you can easily make changes in text spacing, underline links and a lot of other stuff, which was non-changeable earlier.

Marcy Kellar: Responsive designing is growing in popularity with each passing day. This article provides tips related to CSS in responsive design. It’s worth a bookmark even if you aren’t working on responsive design now.

 

Editor’s note: Contributor Marcy Kellar is a SharePoint Strategist and User Experience Designer. Follow her @marcykellar

Last summer, Marcy Kellar began a weekly series of her top picks of UX articles for that week. Marcy is going to pick up the series again so we’ve gone back to publish her original articles.

Here are the top 5 UX articles on branding this week:

1 - The Psychologist’s View of UX Design

You may have heard this story about an elephant: A king brings six men into a dark building. They cannot see anything. The king says to them, "I have bought this animal from the wild lands to the East. It is called an elephant." "What is an elephant?" the men ask.

Marcy Kellar: My background in psychology and life science appreciates the truth in this article on UX Design. I’ve been following the author, Dr Susan Weinschenk since her book, "Neuro Web Design: What Makes Them Click?" This article provides important points about users and why they do what they do. If you are concerned about adoption, this article is worth the read.

2 - How To Get People To Do Stuff: #1 — Use Nouns Instead Of Verbs

This blog post is the first of a new series called "How To Get People To Do Stuff". It will feature nuggets from the book I am writing by the same name due out in March of 2013. I’m also starting a new format of doing video blogs.

Marcy Kellar: The brain lady Dr Susan Weinschenk brings us another good one. This is the first article in a series I recommend reading if you are implementing SharePoint and devising a communication and adoption strategy. The wording of your communication matters.

3 - iPad User Experience Guidelines

Apple’s Human Interface Guidelines for the iPad outline how to create user interfaces optimized for the iPad device. According to Apple, the best iPad applications: downplay application UI so that the focus is on content; present content in beautiful, often realistic ways; and take full advantage of device capabilities to enable enhanced interaction.

Marcy Kellar:This is a comprehensive summary list of design considerations specific for the iPad. Most of these bullets also apply to other tablets.

4 - How Sans-Serif Typeface Styles Affect Readability

by anthony on 09/27/12 at 7:24 am Almost everywhere you look on the web, there’s a sans-serif typeface. Sans-serif typefaces have long been the standard for on-screen text due to their increased readability for low screen resolutions. But new research shows that not all sans-serif typefaces have equal readability.

Marcy Kellar: As SharePoint implementations reach multiscreen platforms and with it becoming easier to use unique fonts in web design, it’s important to consider the differences in sans-serif fonts ad understand the readability of them.

5 - Module Tabs in Web Design: Best Practices and Solutions

Digital today is a world of unprecedented complexity, which is a big opportunity. This research, sponsored by Google, shows different ways Americans use multiple screens.

A module tab is a design pattern where content is separated into different panes, and each pane is viewable one at a time. The user requests content to be displayed by clicking (or in some instances hovering over) the content’s corresponding tab control.

Marcy Kellar: Module tabs are used commonly in SharePoint designs to display several web parts while taking up less real estate. The type and use of content is important to consider when determining if this design pattern is an appropriate solution. This article provides an overview of the design pattern and best practices for use.

 

Editor’s note: Contributor Marcy Kellar is a SharePoint Strategist and User Experience Designer. Follow her @marcykellar

Last summer, Marcy Kellar began a weekly series of her top picks of UX articles for that week. Marcy is going to pick up the series again so we’ve gone back to publish her original articles.

Here are the top 5 UX articles on branding this week:

1 - Why You Should Never Center Align Paragraph Text

by anthony on 01/19/11 at 2:28 pm Text is a beautiful thing. It not only has function, but form as well. When you’re creating text, it’s likely that you’re not only thinking about what your text should say, but how it should look.

Marcy Kellar: This week, I’ve got a few gems from one of my favorite web sites, uxmovement. This first article from UX Movement provides you with the reasoning behind why you shouldn’t center-align text in paragraphs on the web, a surprisingly common mistake.

2 - Why Text in All Caps is Hard for Users to Read

by anthony on 09/04/10 at 4:14 pm Do you remember the story where a woman got fired from her job for using all caps in an email? There’s something about text in all caps that turns people off. Using it in a social context means you’re yelling.

Marcy Kellar: All caps doesn’t just imply "yelling," it also is harder to read. The second article from UX movement gets all sciency about why all caps is a no-no and provides solid supporting evidence. I have to admit, I use all caps sometimes by choice and other times because I’m following a corporate brand guideline. Just remember to consider the impact and test readability with users.

3 - Why Distinct Icon Outlines Help Users Scan Faster

by anthony on 08/04/11 at 10:05 pm Icons are visual cues that help users use interfaces more efficiently. Instead of reading each word on an interface, users can scan for the icon that represents the task they’re trying to do. However, sometimes scanning icons can take longer than expected if the icons don’t have distinct outlines.

Marcy Kellar:The third article from UX movement helps support the reason I have an issue with one of the design of SharePoint 2013 default apps. They are represented by uniformly shaped, consistently colored icons. This uniformity negatively impacts the usability of the application. It’s better to use icons with distinct outlines and this article explains why.

4 - Funny and Helpful 404 Error Page from Mint.com › PatternTap

Marcy Kellar: Patternry is another favorite site of mine. This screenshot is a funny yet helpful error page. When you are customizing your SharePoint sites, you may want to think about making a custom 404 error page. It doesn’t have to be fancy or funny but it should be helpful and informative.

5 - It’s a Mad, Mad, Mad, Multiscreen World

Digital today is a world of unprecedented complexity, which is a big opportunity. This research, sponsored by Google, shows different ways Americans use multiple screens.

Marcy Kellar: If you haven’t yet had to design for multiple screens, just wait, you will. This infographic gives you some perspective on how people consume information on various screens.

 

Editor’s note: Contributor Marcy Kellar is a SharePoint Strategist and User Experience Designer. Follow her @marcykellar

Last summer, Marcy Kellar began a weekly series of her top picks of UX articles for that week. Marcy is going to pick up the series again so we’ve gone back to publish her original articles.

Here are the top 5 UX articles on branding this week:

1 - 8 Best Resources for Interface Icons - UX Movement

by anthony on 09/18/12 at 11:59 am Nothing can make a text link more clear and elegant than placing a relevant icon next to it. Icons serve multiple purposes on a user interface. They not only make your interface look more attractive, but they’re also useful for making certain text links easier to recognize and understand.

Marcy Kellar: For the love of all that is good and pure, stop using clip art for icons. Anyone doing web design will come across a need for icons. When you decide you need icons, be sure to head to one of these sites to find a matching set. Set aside time to search, it can take a while to find the right ones. If you can get your icons of from the same set, your site will look more polished.

2 - Sticky Menus Are Quicker To Navigate | Smashing UX Design

Most designers would agree that navigation is one of the most critical components of a website. Despite this, it is not always easy to use or access. Traditionally, users must scroll back to the top of the website to access the navigation menu.

Marcy Kellar: This article describes the usability of a technique used to make navigation stick to the top of the page. We SharePoint folks have experience with this technqiue because by default, the ribbon of SharePoint 2010 sticks to the top of the page no matter where the user is in the page. This articles asserts that with sticky navigation there was a 22% increase in speed of navigation. In an intranet, with a sticky administrative tool like the ribbon, translate that number to hours saved in productivity.

3 - How to Create Content Maps for Planning Your Website’s Content

Content mapping is a visual technique that will help you organize and understand the content of a website. It can be a simple and valuable part of your site’s overall content strategy. This short and simple guide should help you get started. What is Content Mapping?

Marcy Kellar:This article describes a technique called content mapping, a brainstorming method to help understand your site’s content. By begining with a loose method like this you develop the vision, direction and requirements of a site’s content, a cornerstone of most SharePoint sites. Once you have mapped your content, you can choose the right SharePoint components for managing and displaying the content. Give it a shot and see the difference a solid understanding of your content makes.

4 - 5 Timeless Usability Principles for Website Designers

There are some usability principles which change very rarely. The reason for this is because they are deeply ingrained into our human nature. Even if they change, they change very slightly, the fundamentals remain the same. We will try to cover some most important usability principles in the following article.

Marcy Kellar: There is so much information out there on best practices and usability principles that it’s hard to narrow it down to a list to live by but this aricle provides 5 that are easy to remember even if I’m not in agreement on the order: 1. Single Goal. 2. Navigation 3. Don’t Make Users Think 4. Design For Your Users 5. Use Conventions.

5 - A List Apart: Articles: CSS Positioning 101

Marcy Kellar: If you have done any SharePoint branding with CSS, you have probably played with CSS positioning — especially in your headers and footers. Using CSS positioning can help you move away from using tables but it can get confusing when you start talking about flow, absolute and relative positioning. This article provides a fundamental understanding of using CSS to position page elements and provides plenty of examples. Highly recommended.

 

Editor’s note: Contributor Marcy Kellar is a SharePoint Strategist and User Experience Designer. Follow her @marcykellar

Last summer, Marcy Kellar began a weekly series of her top picks of UX articles for that week. Marcy is going to pick up the series again so we’ve gone back to publish her original articles.

Here are the top 5 UX articles on branding this week:

1 - Are You a Right-Brained or Left-Brained Designer? | Design Shack

Colors, pictures, creativity; designers are quite obviously a group of people that tend to gravitate towards using the right sides of their brains… right? Or is this simply a stereotype that doesn’t necessarily ring true? Is design exclusively artistic talent put to productive use or is it possible that the industry is equally full of analytical problem solvers?

Marcy Kellar: I’m an analytical person in a creative field and cringe when someone asks me to make something pretty. I prefer to work within conventions and science to solve problems. That’s what I do as a designer. This article gives you insight into the stereotypes applied to designers and is a great read. So I’m interested, which kind of designer are you? Right or Left Brained?

2 - Why It’s Important to Sketch Before You Wireframe - UX Movement

Have you ever had an idea for a website or application? It’s easy to come up with the idea, but the hard part is understanding how that idea will take shape in user interface form. This is where sketching is useful.

Marcy Kellar: When asked what UX tools I use, I answer "pen and paper first." It’s a good practice to be in when you begin to mold an idea into a UI. This article provides you all the reasons to not jump immediately into wireframing. And I’ll let you in on a secret, if you start with paper, they stop asking you to "make it not look like SharePoint" — at least for a little while.

3 - Beyond Wireframing: The Real-Life UX Design Process | Smashing UX Design

There’s a lot of talk about wireframing, but what does our work look like beyond wireframing? Was I the only one with a simplified approach? What can we do to create successful designs? What does the process beyond "the poster" look like? Is there a pattern that works well for the majority of designers?

Marcy Kellar:A second article on wireframing gives you an in-depth look into ideal practices and process for managing the user experience and where the UI fits into that process. These are process often overlooked in SharePoint branding and UI design. Are there any ways you might improve your approach to the SharePoint UI based on these articles?

4 - Clean CSS - A Resource for Web Designers - Optmize and Format your CSS CSS Formatter and Optimiser/Optimizer

css, clean css, css formatter, css optimizer, css optimiser, web design tools, web design tutorials, css tutorial, clean design, clean graphics, graphic design, macromedia, adobe, dreamweaver, flash, frontpage, html, javascript, ajax, php, asp, best css, best web design, css cheat sheet, css code, xhtml, html tutorials, dreamweaver tutorials, flash tutorials, photoshop tutorials, illustrator tutorials

Marcy Kellar: Use this application to clean up the formatting or size of your CSS. Copy your CSS from SharePoint Designer or Visual Studio into this app for a little scrubbing. You can use it to format CSS. It doesn’t validate your CSS, it only optimizes and formats it but it is a step I use prior to transferring my CSS to another designer or prior to putting it in production. There’s even a setting to keep your comments. I use this every week at least once.

5 - The Designer Will Make It Pretty | Smashing Magazine

I am sure that my day job as a designer has a lot of similarities to that of the entire Smashing community. I create wireframes, mockups and concepts. I craft HTML and CSS using methods that I hope are fluid and adaptive.

Marcy Kellar: Please please please stop saying the designer will make your garbage site "pretty." The article is a little long and sometimes the author stretches to make a point but definitely worth it. It gives you some insight into why designers cringe when asked to "make it pretty" and what actually goes into making a site attractive. Make sure you check out the author’s examples of successful, usable eye candy sites.

 

Editor’s note: Contributor Marcy Kellar is a SharePoint Strategist and User Experience Designer. Follow her @marcykellar

Last summer, Marcy Kellar began a weekly series of her top picks of UX articles for that week. Marcy is going to pick up the series again so we’ve gone back to publish her original articles.

Here are the top 5 UX articles on branding this week:

1 - PixelWindow

PixelWindow is a simple, light-weight, cross-platform application for measuring things on your screen. It creates a transparent window that acts like a pixel ruler with its width and height reported in the center. Just drag it around and resize it to measure whatever you want.

Marcy Kellar: PixelWindow is an easy to use, light-weight application that helps you measure anything on your screen. A transparent window overlays other windows to assist in measuring pixels. It’s come in handy for me when using applications like Mockflow or when implementing branding in SharePoint.

2 - Why Topic Pages Are The Next Big Thing

Chronological and real-time consumption of content just doesn’t work anymore. It’s time for topic pages to add a layer of organization on top. In last week’s post, 5 Reasons Why Web Publishing is Changing (Again), we explained why online publishing is going through another sea change.

Marcy Kellar: This article asserts that Chronologically based content is on it’s way out and Topic pages are on the way in. Topic pages provide top level organization grouping all sorts of content into one place based on a topic…. It’s an interesting concept that screams SharePoint Metadata and Web Content Management to me. Who knows, maybe we will soon see a trend to use SharePoint Metadata to drive topic pages. What do you think?

3 - Tunnel Vision and Selective Attention (Jakob Nielsen’s Alertbox)

Jakob Nielsen’s Alertbox, August 27, 2012 Summary: Users don’t see stuff that’s right on the screen. Selective attention makes people overlook things outside their focus of interest. How can people overlook something that’s right there on the screen? If you’ve ever observed a usability study, you’ve probably had many occasions to ask yourself this question.

Marcy Kellar:This article by Usability Giant Jakob Nielson provides research based direction on content placement so that web users will see it. As you design your SharePoint pages and web parts, remember that content placed outside of a users "tunnel-vision" will likely not be seen. Take advantage of the research and design around user behavior.

4 - 6 Popular Content Presentation Design Patterns

Content is what is considered the "meat" of a website. Content should be usable and displayed in a manner that makes it efficient to read and act on. Now that we have discussed website navigation design patterns, let us now explore popular design patterns for displaying content.

Marcy Kellar: Oh how often I am called in to apply simple branding only to discover that the content presentation is the primary agenda. If you are doing SharePoint branding, you will need to understand content design. This article provides a summary of a few design patterns that can be implemented using lists/libraries coupled with Content Query Web Parts, Dataview Web Parts or Custom Controls/Web Parts.

5 - The mistakes killing your conversion rate | Webdesigner Depot

You probably pride yourself on being a great web designer, right? But did you know that some elements of your website designs might actually be lowering the conversion rate and revenue of your website without you knowing it? These are often just simple mistakes that can easily be fixed, yet have huge impact on your conversion rates.

Marcy Kellar: The title of this article will mislead you into thinking the article content isn’t relevant to SharePoint Branding. For this audience, the title of this article should be "Big Mistakes when Designing a SharePoint Page." These mistakes are commonly seen in SharePoint solutions even before branding is part of the equation. Every bullet point is appropriate guidance to help you design a better SharePoint page (except the bullet about Variations. You can skip that).

 

Editor’s note: Contributor Marcy Kellar is a SharePoint Strategist and User Experience Designer. Follow her @marcykellar

Last summer, Marcy Kellar began a weekly series of her top picks of UX articles for that week. Marcy is going to pick up the series again so we’ve gone back to publish her original articles.

Here are the top 5 UX articles on branding this week:

1 - 60 User Interface Design Tools A Web Designer Must Have

User Interface Design Tools can be essential for creating great designs fast, here you find more than 50 of the best tools around.

Marcy Kellar: This article provides a comprehensive list of tools used for Web Design. (Yes, you can use them for SharePoint even though they are labeled for Web Design.). The list includes several tools that are part of my UX arsenal such as Mockflow, which is an interactive wireframing tool that I have used for every SharePoint branding client I’m working with this week.

2 - Running a Successful User Workshop

For UX professionals, talking to real users is undoubtedly an important part of the process. Our clients are experts in their industries and we are experts in ours but the best way to learn what users do, think, and want is to ask them directly. That’s where user workshops come in handy.

Marcy Kellar: The User Workshop can be a huge success or a big disappointment and waste of time. This article provides you with the basics of making a User Workshop successful. The best workshops take planning. Be sure to check this article out before scheduling the workshop or deciding on the logistics of facilitation.

3 - 20 Funny Lorem Ipsum Dummy Text Generators

As a frontend developer, Lorem Ipsum dummy text is something I have to use almost on daily basis. The whole point of putting dummy text is to see how a web layout will look like once you’ve all the content filled in. It’s extremely useful to test how your layout handle different amount of content.

Marcy Kellar: In UI development, real content is preferred in wireframing and mockups, however, if you must use Lorem Ipsum, why not try one of these funny dummy text generators. I recently used the Bacon Ipsum generator to create dummy documents, news content and profiles to demonstrate SharePoint search. The client enjoyed seeing the results of my search query using the term "bacon".

4 - UI: Proper Indicators for Hidden Elements

Tabs, collapsed menus, accordion forms, and the ever popular hover items such as mega menu drop-downs - progressive disclosure is a great way to cut down visual clutter while still offering the user lots of content and features. However, there’s an inherent danger to these hidden elements: the user may fail to notice that the hidden content exists!

Marcy Kellar: This article provides insight into best practices of the design of hidden elements in the user interface, which is very helpful when you are planning interactive content in SharePoint.

5 - UX amateurism and why I’m not a UX designer anymore : GlueThink

I used to call myself a UX designer, but I don’t think I can anymore. You see, I have in mind an image of a UX designer that does well to achieve a user-centered, holistic experience; and I’m nowhere near that. I keep making mistakes as a designer.

Marcy Kellar: Recently, I’ve seen the term User Experience (UX) used in many roles, titles, and functions in SharePoint teams and consultancies. If you don’t have mainstream UX experience and are part of one of those teams or have a UX related title, you may share the author’s feelings. I know I felt overwhelmed when I first started out. This article let’s you know you aren’t alone. There’s a lot to learn through the author’s transparency. The comments are exceptionally revealing as well.