UX & IA Design Thinking

Axure RP 9 vs 8 UI Comparison

noreply@blogger.com (Erik Swenson) — Thu, 19 Sep 2019 14:58:00 +0000

I have been thinking about posting a Axure 9 UI review for a while now. In this video I explore some of the differences between the two versions of the Prototyping tool. Overall most of the core features are the same such as creating shapes, text blocks, and formatting. In Axure 9 they have allowed you to personalize the location and size of your tool panes. They have also changed around the interactions panel to be more streamline and not take up as much space. All of this takes a little bit of time to get use to but once you start working with it for some time it will become second nature.

Check out the video below, I hope to create more videos around additional features within Axure 9.

First YouTube Live Design Stream!

noreply@blogger.com (Erik Swenson) — Thu, 15 Feb 2018 18:07:00 +0000

Ok, I finally did it! I did my first live stream on youtube and people actually showed up! Yeah it was not millions of designers looking for help but its a start. It was not promoted, and kinda a last minute thing on my part. I had a few request from some people to do one so I figured why not. If you want to get alerted about my next one please subscribe to my youtube channel here: Subscribe to my Channel

I hope to do more steams soon. Please comment on this post on what types of things you want me to cover and I will try my best to fit them all in.

Simple ways to Create Donut Charts in Axure / Sketch : Video Demo

noreply@blogger.com (Erik Swenson) — Mon, 18 Dec 2017 19:40:00 +0000

I have recently had the need to create some different data visualizations for recent clients. I really enjoy the challenge on how to create new design elements that are both visually compelling but also provide really valuable data to the user.

The need was to create some conceptual examples of different data visualzations to compare local wifi usages. I usually start out by sketching a few ideas out and here is an example of that.

After I have a pretty good idea of what it should look like based on the user needs identified I then jump into either Sketch or Axure. I found a really easy way to create donut charts in Axure by converting a ellipse shape to a dynamic shape that you can adjust the handles to resize the size of the pie.

This shape will be your variable percentage. This is really great because it is super easy for you to change the size of the pie without having to re-draw the circle.

The next step is to create a light gray fill circle the same height/width as your other object and put it behind it. Then create a smaller circle and place it directly in the center of them all. Make sure the circle in the middle matches the background color.

Creating this same thing in Sketch is a whole lot more difficult as it does not include dynamic shapes like Axure does so you will have to manually edit the circles to get the desired results. Here is what the finished concept looks like.

See my video below that shows how this is done for both Axure and Sketch. You can download the Axure 8 file HERE to get you started.

Happy Designing!

Sketch Basics Video Tutorial

noreply@blogger.com (Erik Swenson) — Thu, 14 Dec 2017 18:31:00 +0000

Wow, look at me go! A blog and two video posts all in one day… I just wanted to put out this quick video to showcase some of the core UI controls within Sketch. I have to be honest for the longest time I did not give Sketch the credit it deserves because I was so focused on Axure. However Sketch is so simple and easy to use that I now use for almost all of my projects. It is really basic but provides all the right things to quickly throw together some concepts or designs.

Axure RP Basics Video Tutorial

noreply@blogger.com (Erik Swenson) — Thu, 14 Dec 2017 17:07:00 +0000

This video is the first of many tutorials that will get you started with learning a new tool for your designer toolbox. Take a moment to check it out and subscribe to my channel.

Evolution of UI/UX Designer Tools

noreply@blogger.com (Erik Swenson) — Wed, 13 Dec 2017 17:21:00 +0000

Over the last 15 years I have used many different tools to help me create great design experiences. One of the largest changes I have seen is the shift to using one tool that basically does it all. I have sort of come full circle when it comes to software / hardware within my design career.

I first started off in school using a Mac to create digital art using Adobe Photoshop and Freehand from 1998-2001. My first job out of college I was producing illustrations for a publishing company and I used Photoshop, freehand, and illustrator exclusively. Then came 2003 and what I call my era of SharePoint where I ditched the Mac, grabbed a Windows Laptop and started doing all my wireframes in Visio. It was not until 10 years later (2013) that I came back full circle. I jumped back on the Mac Powerbook bandwagon and started using Axure. Axure for me has been amazing but I am starting to see another shift where Sketch has become that next best thing.

Sketch by itself is pretty limiting, however what makes it so powerful is that it has so many extensions and integrations with other tools such as Invision and Zeplin. Invision allows me to organize my Sketch concepts and provide a lightweight prototype to review with clients using hotspots. I don’t think Invision will ever replace the advanced prototyping features that Axure provides however it provides enough to get the point across. I am a bit on the fence since I see a huge value for visual designers to create amazing designs in Sketch and exporting them into Zeplin to create very detailed design specs that are super helpful to the developers who will be implementing the designs. However it is kinda weird to think of a product called "Sketch" and producing really high fidelity designs from it which are on the opposite side of sketches…

One of the biggest things that keeps me from fully converting over to Sketch from Axure is the inability to easy create flow diagrams, sitemaps, connected boxes, tables and lack of built in prototyping directly in Sketch.

My design lifecycle right now looks like this:
1. Sketches (Paper)
2. Conceptual Designs (Axure/Sketch)
3. Wireframes (Axure/Sketch)
4. Interactive Prototypes (Axure/Invision)
5. Functional Annotations (Axure/Sketch)
6. Visual Design Mockups (Sketch)
7. Developer Style Guide (Zeplin)

As you can tell from the above I am using both Sketch and Axure for some of the same tasks. It really depends on the type of project and team on what tool I will use to create my concepts and wireframes. If I know I will need to do heavy prototyping I will go with Axure. Or if I know it will be a large team effort and all of the other designers will be using Sketch I will use that instead.

There are some other players in the game like Invision Studio, Adobe Experience Design, Balsamiq, and JustInMind. It really comes down to a few core factors that makes a tool productive and worth using.
1. The core features on how you will use them
2. How long will it take you to learn and start being productive
3. Collaborative features to share and interact with others
4. Cost of initial use and publishing plans

Things are changing fast and furious and the major players are all working to make their product the best it can be for all user types. I still don’t think there will ever be a single one size fits all tool but if there is I will be happy to jump on that bandwagon.

In the coming months, I hope to post some hands on tutorials for both Axure, Sketch and Invision Studio. Post a comment on what tools work the best for you.

UI Trend with Modal Windows

noreply@blogger.com (Erik Swenson) — Thu, 30 Mar 2017 17:42:00 +0000

You may say that Modal windows are what pop up were 10 years ago. Like them or hate them they have become an essential UI design element for almost any website or application. Recently I have started to see a transition of how these screens are being used. We first started seeing modals about 8 years ago when a developer named Lokesh Dhakar created a Javascript Library called “Light Box”. It was a very simple way of putting focus on one image at a time and graying out everything else.

This became so popular that many people starting to throw anything and everything in these smaller focused screens. Some people call them Dialog boxes, others call them Modals but they really all mean the same thing. The main purpose is to present the user with additional information while putting the main parent page on hold until they are done.

Of course with any UI design element they have been misused and abused in many different ways. I have seen some applications that have more than 3 levels of modals one on top of each other. Or times where the modal includes an extremely complex workflow or wizard that does not allow the user to exit until a set of criteria is fulfilled. Most of the times when modals are used in the wrong way it is because the content owners are trying to inject way to much information in such a small space. Rule of thumb, if you have to consider either a “Next” button or a “Scrollbar” in your design just STOP. It may be better to have a new full page dedicated to that content and not a modal.

With the introduction of bootstrap and other frameworks modals have become pretty standard on how users will interact with them. Usually the grayed out area is a clickable area that allows users to navigate back to the parent screen. Other times we become overly cautious and have “X” icons and “Cancel” buttons to make sure users feel comfortable that they are not stuck on an overlay page and no way to get back. One interesting trend I am seeing lately is moving the “X” button outside of the modal box and into the gray area. Pinterest uses both on their website which to me is a little bit confusing...

If you look at Facebook the close icon is all the way to the top right. This is slightly annoying for the users since they have to move their cursor a pretty far distance on larger screens to close it down. However since the whole gray area is clickable it is not a deal breaker. I would be interested to see some metrics on how often in Facebook users actually click the “X” icon vs clicking on the gray background?

Twitter has the close icon closer to the box which makes it slightly easier for the users to close it down.

Overall the biggest thing to remember is that modals are meant as short term screens to present and capture small bits of additional information that supports the parent screen. They should not be used for presenting heavy content, complex workflows and modals on top of modals. One last thing to consider is that you will need to consider alternative ways of presenting these screens on mobile devices. In most cases they will become full screen take overs due to the limited space available.

UCD Process

noreply@blogger.com (Erik Swenson) — Tue, 21 Mar 2017 13:16:00 +0000

Over the last couple of years UCD (User Centered Design) has become a buzz word just like RWD (Responsive Web Design). 5 years ago when I wrote my SharePoint Branding book I use to call it the 4D’s of User experience. It included Discovery, Definition, Design, and Development. I had a nice little picture and everything to depict the different phases.

Now the picture is much nicer and clean however, I really don’t think it matters what you call each phase it matters more what you do within them. I have seen so many different variations sliced and diced in different ways. To me it is about adjusting your approach based on the needs of your users and your client. In a more traditional waterfall project you have a tendency to over burden yourself with documentation because there is no chance of going back. Also those types of project are usually the ones where you scope out in the begging a full solution without ever fully knowing what the real need actually is. I would much rather only scope the first couple of phases to really truly understand what you are dealing with before you can even imagine what the technical effort would be.

The biggest shift that I have seen though a more refined UCD approach is really focusing on the first phase which is understanding who the users are, and what are their needs. This is a shift in getting away from just focusing on Functional Requirements but diving deeper and truly understanding individual user needs. In the past I used to focus on how to customize and configure a tool like SharePoint to give the users a somewhat tailored experience. This did not always provide the users what they needed but it was better than nothing. I do have to say it is really refreshing being able to go into a project technology agnostic. To me it sometimes feels like you are trying to put a square peg in a round hole if a technology has already been defined by IT and there is no clear use case or need from the users on how they will use it. This is a clear case where user adoption will become an issue and it will be a big waste of time and money.

One other shift I have noticed over the last few years is that personas have really changed their meaning and purpose. We use to define different personas based on their organizational structure (HR, IT, Sales) or by their permission roles (Admin, Contributor, Reader). We also use to focus more on their demographical information such as (Age, Location, Device Types) which really did not provide much value.

I think due to the fact that I spend more time diving deep through user interviews to gather as much as I can about their day to day activities. Learning more about what their pain points are and identifying commonalities with all that we have met with. This helps drive better insights into who those core personas will be and not just based on a title or a role. These types of personas will help us during the definition phase when we start to translate their user needs on to paper.

Not every project needs to have a full set of polished personas, but at least some level of understanding who you are designing the application for. For the most part the 4D’s still hold up pretty well but like I said before it really does not matter what you call each phase so long as you are providing value in each one of them.

New Scrollable Tabs Design Pattern

noreply@blogger.com (Erik Swenson) — Thu, 09 Feb 2017 21:46:00 +0000

By nature most people are resistant to change. I have learned the hard way that just because something has been working great for the last 10 years does not mean it is always the best solution now. So much has change with technology not only within the last 3 years but over the last 6 months I have seen drastic evolutions of the art of possible. Users are demanding more and in faster timeframes. We as designers have to keep up with the latest trends, patterns, and interactions or you will be left in the dust.

I recently had a design challenge that required the ability to display a horizontal sub navigation for mobile. Since we already had a main navigation being taken up by the parent hamburger menu I was in a bit of a jam on what to do.

My first instinct was to group all of the navigation elements into some sort of drop down so that when users clicked on the drop down they see the navigation list options. This would have been fine but was more of an old school way of looking at things. Also the animation of the drop down was a bit jarring on a mobile device.

A designer suggested using a new design technique to have the same tabs but allow the users to swipe through them when presented on the mobile responsive view. At first I was hesitant since it would require the user to clearly understand the menu was cut off on one side and all they needed to do was swipe from right to left to see the other options.

After further research this was a design pattern that was introduced through Google’s Material Design Scrollable tabs. See video animation HERE

Overall I think the scrollable tabs is a great new design pattern but only used in moderation and in specific scenarios. I find myself a lot of the time thinking about the old school way of doing things that worked from project to project. However I think we as designers need to push ourselves to think more outside the box. The traditional top or left side navigation is just not going to cut it anymore. We are in a world of younger user types that expect cutting edge design experiences that were limited by technology just a few years ago.

UX Tools of the Trade

noreply@blogger.com (Erik Swenson) — Wed, 08 Feb 2017 18:29:00 +0000

The tools we use to help define UI experiences is constantly changing. The fact is that Photoshop and Illustrator are no longer the preferred tools in an XD designers tool kit. We have transitioned to more flexible and robust applications that allow both low fidelity sketch like concepts to Pixel perfect high fidelity visual designs. Sketch does a really good job at providing both of these levels as well as the in between. In combination with Zeplin and Invision these three applications provide a pretty solid output for creating great experiences for both desktop and mobile applications. Zeplin has been a great tool to lessen the burden on our visual designers for creating redlines to our developers. It has some really neat features that would take weeks for to pull together in a style guide around spacing, colors, fonts etc. They are even experimenting with providing HTML and CSS outputs from the designs.

When creating wireframes I tend to use both interactions that provide some level of prototyping and annotations that help provide specifications not easily seen through an interaction. For the last couple of years I have been using Axure RP as my workhorse application. I could easily create and update flow diagrams, taxonomies, site maps. It provides amazing prototyping with annotations, show / hide, modal windows, and even complex interactions such as rotators. Axure also provides an easy way for me to share my designs with my clients through an online web viewer.

I have experimented with a few other tools such as Adobe XD, however I still think they have a ways to go with making this a single use tool that provides all the features that I need.

I do see a benefit for all designers to be working on the same tool to easily transition from wireframes to visual comps without too much of a complete rework. However, I would be interested to learn more about how your teams work together and the tools that you use?

Blog Transition from SharePoint to User Experience Design

noreply@blogger.com (Erik Swenson) — Mon, 06 Feb 2017 16:18:00 +0000

As time goes on we learn, grow and explore in new areas that make us happy and inspired. I am very lucky to have found that path. Since 2003 I focused on providing great experiences to my clients around a specific tool known as Microsoft SharePoint. I was so invested in this tool that I even wrote a book on how to stretch the limits on customizing it. Over the last couple of years SharePoint has changed to be more stand alone through Office 365.

Within the last few years I have had the pleasure to not only wok for the best company Slalom Consulting but also work for some really amazing clients! My most recent projects have been outside of the world of SharePoint and in all honesty I could not be happier. It is sad to see it go but I think it is time to pass the torch to other great and amazing bloggers that will keep posting technical posts on how to configure and explore new ways of making SharePoint do what they need to present the right information to users at the right time.

My plan is to transition this blog from a technical reference point around a specific technology to a more organic discussion around User Experience Design, Research, and Information Architecture topics. In all honesty this is really what I have been doing for the last 15 years of my career anyways. I am not going to remove or delete any previous post since some of them still can provide value to others that still support SharePoint both in the cloud on Prem.

I have some great UX topics in mind that I think all will gather some insights from. Thanks to all that have supported me over the years and I hope to inspire many others in the future to think outside of the box and create amazing experiences that matter!

Erik Swenson
Principal Experience Designer

SP24: Creating the Ultimate User Experience

noreply@blogger.com (Erik Swenson) — Thu, 15 May 2014 11:21:00 +0000

My SP24 Session has come and gone but can be viewed at any time on-demand either at the SP24 site HERE which allows you to add in comments and download the supporting PowerPoint presentation and SharePoint 2013 Axure base interactive wireframes. However you will need to register to sign in. Or you can view my session below from YouTube!

My Session Intro:

Full 1 hour Session:

I hope you enjoy my session! If you do not want to register through the SP24 site I have uploaded the Presentation and the Axure file to my OneDrive account.

Erik Swenson
UX Solutions Principal
Slalom Consulting
Twitter: ErikJSwenson
LinkedIn: Erik Swenson
Session Hashtag: #SP24S005

Leave a comment on what you think about my presentation and any topics around User Experience!

SP24 - My Session Rewound!

noreply@blogger.com (Erik Swenson) — Tue, 13 May 2014 14:56:00 +0000

So come to find out my session was the second highest viewed session of SP24 (If you were not counting the Keynote).

The coordinators have come up with a great idea to re-run the conference but in reverse order. This could be good or bad for you depending on where in the world you are located. For me on the Easter Time zone in Boston MA. My session will be starting on May 15th at 2am in the morning… But for someone on the other side of the pond that might be a prime time to watch it.

My Session:
SharePoint 2013 Creating the Ultimate User Experience

I will bite the bullet and drink a few red bulls to stay up and chat online while the session is going on at that time so come and join me to talk about creating the ultimate User Experience or just to chat if you are bored :)

I have posted my slides and the SharePoint 2013 Axure 7 wireframes to the site so make sure you register to get access to those files.

My session should be available on demand as soon as the rewound is over and I will create another post with that video link.

Hope to see you at my session!

Less than 24 hours until my SP24 Session Starts!

noreply@blogger.com (Erik Swenson) — Wed, 16 Apr 2014 14:31:00 +0000

This is very exciting! My Session on creating the ultimate user experience will be live in less than 24 hours! Please make sure to go http://www.sp24conf.com and register before all the slots are taken.

I promise that my session will be fun, interactive, and you will absolutely learn some new skills, trips and tricks to create your own great experiences for your users. My Session Details below:

SharePoint 2013
Creating the Ultimate User Experience
April 17th 10AM EST

Below is the session room that you will be able to view the session streaming the Google Hangout, chat, and ask questions.

Also as part of my session this Ferrari will help guide us on the path to the ultimate user experience… So Buckle up, and hold on its going to be one hell of a ride!

Session Tag: #SP24S005
Follow Me: @ErikJSwenson
www.erikswenson.blogspot.com

SP24 Live Presentation Time Update!

noreply@blogger.com (Erik Swenson) — Mon, 07 Apr 2014 16:08:00 +0000

Update: My session time just changed from 9am to 10am EST.

I guess there was a glitch in translating GMT to EST or other local time zones on the website.

SharePoint 2013 Creating the Ultimate User Experience
On April 17th 2014 @ 10am EST (2pm GMT) I will be presenting at the FREE SP24 SharePoint Conference.

I hope to see you at my session!

Presenting at SharePoint 24 Hour Conference!

noreply@blogger.com (Erik Swenson) — Mon, 24 Mar 2014 16:25:00 +0000

Great news! On April 17th 2014 @ 10am EST (2pm GMT) I will be presenting at the FREE
SP24 SharePoint Conference.

My session topic is:
SharePoint 2013 Creating the Ultimate User Experience

Here is a 1 min overview of my session!

In this session I will walk you through best practices and tips and tricks for defining, designing and building a SharePoint 2013 UX project.

These activities include:

Identifying what users want (Requirements).
Taking those needs/wants and creating the experience with Axure interactive wireframes.
Using current trends such as flat design to create mockups in Photoshop for a slick modern UI that is tailored to your business.
And finally reviewing design concepts for both desktop and mobile through Responsive / Adaptive web design.

My Co-worker David Lozzi also has a session talking about taking SharePoint Public. His 1 min video: https://www.youtube.com/watch?v=htClwprrW-E

I hope to see you all at my session!

SharePoint Conference 2014 User Experience

noreply@blogger.com (Erik Swenson) — Wed, 12 Mar 2014 03:35:00 +0000

My journey in and around the Microsoft SharePoint 2014 Conference in Las Vegas this year has many high’s and lows. The lows of course are all the times that the casinos took my money but we just wont go there… Here is a little user journey for you on my path to and from the conference.

I have been to this conference before and had a really good experience both times. I learned a lot and had a good time doing it. This year was a little different… I was one of the lucky ones that knew on the day that registration opened that I was able to go fully funded by my company Slalom Consulting (More about how awesome they are later in this post…)

When I looked at the sessions I was really surprised at the lack of User Experience sessions that were offered. The previous conference was pretty much loaded with UX sessions since the design manager was new and the buzz was all around the new branding look and feel.

So I started building MySPC calendar and noticed a trend that I was adding a lot of sessions around Responsive Web Design and Information Architecture… Both things that I know really well and more than likely would not provide much value. To me these were the only relevant sessions around User Experience. Come to find out on the first day I was really wrong…

After the long 6+ hour flight to Vegas from Boston things started out pretty good from a social networking perspective. I was able to network with a few people and set the stage for a truly memorable experience.

The next day all 10K+ attendees gathered together to listen and experience the keynote. I was not really expecting to get much from our former president, but was really excited to hear what the product team had for us for the future of SharePoint. Once we got past the dull part where we were told to use Technology for good purposes I was itching to get to the good stuff.

Jared Spataro (GM) started off the keynote and really kicked off the session talking about how we sometimes find ourselves “Data rich but knowledge poor” This hit me pretty close to home as right before the conference we starting using Yammer heavily and I found myself lost in yet another place to chat, share, and find information…

Jeff Teper (Microsoft Corp. VP) came on stage and started talking about how Microsoft is “Transform the User Experience”. This of course had me sit up in my chair and listen deeply.

There were three new user experience that he talked about:

Social Workplace
Personalize Insights
Next Generation Portals

Social Workplace Oslo:
This is the new feature for Office 365 and a new windows 8 app called Codename: Oslo. I am not sure if I am quoting someone or not but here it goes:

“Oslo is not a place where you go to find information, however it is where information finds you”

I would love to copyright that but again it seems too good of a statement to not have been said before… Here are a few screenshots of what the new Oslo experience looks like.

Here is a really cool video that I found that showcases some of the cool things that Oslo can offer.

Personalize Insights:
The backbone to OSLO which they are calling Office Graph. This is the engine behind the scenes that take all the related information and surface the most relevant info to you the user.

Next Generation Portals:
The new wave of Portal templates that provide out of box portal solutions that are more engaging that leverage the social platform and office graph and available anywhere on any device.

I was really excited to hear about Oslo but even more excited to learn more about the Next Generation Portals… So many of my clients are extending the OOTB capabilities and wanting SharePoint to not look like SharePoint. I personally think they mean that they want SharePoint to act and function not like SharePoint…

The rest of the keynote Julia White (General Manager) showcased some live demos of the new integration of Yammer into Office 365 and exchange. Now you can see your Yammer groups and conversations directly within your Office 365 outlook experience.

I personally think that Outlook should be that one stop shop for all communications and social interactions. She also showcased that each yammer group can have their own calendar. Within Office 365 you can add those calendar events into your own personal calendar with just a few clicks.

At this point I am wondering if Yammer groups are staring to take over the whole “Community” concept? Where before you had the option to join a community site and write and share information on the newsfeed. However Yammer now seems to take that concept and transform communities into groups where you can more openly get notifications, share documents, and discover new information without having to deal with a lot of administration overhead to spin up a SharePoint Community site and set permissions etc.

Julia then showcased another key component that surfaced though out the conference and that is the new App Parts.

SharePoint 2013 App Parts:
App parts allow developers to write code to surface information in new ways.

Her demo showed how Yammer could be pinned to the side of a PowerPoint presentation so that you and your colleagues can have a social conversation in and around the document and make edits together in real time.

In one of the sessions that I attended Saurabh Bhatia presented SPC283 (Get started developing Apps for Office & SharePoint 2013) he identified that there are a couple of new ways to surface up app data: Task Pane, Content, and Mail.

Julia’s marathon of a demo then went on to showcase the new windows 8 Oslo app and the SharePoint Video Portal.

Office 365 Video Portal:
This new video portal allows you to see what videos are trending, popular, training, and fully customizable.

After the keynote was finished I scratched my head and said hmmmm, what about the other part of the next-gen portal stuff… Where is the demo for that?

So, after the keynote I ran to the Expo Center and directly to the Microsoft Knowledge area. I talked with a couple of Microsoft people and whipped out my twitter feed to show them a screenshot that Randy Drisgill had taken. They basically told me that the focus right now is on the video portal and that the other things that you see above are currently in development… I was like hmmm, why show a screenshot of something in a keynote and never talk or show it in any other sessions the rest of the week?

Anyways the other content around Oslo, the video portal, app parts, responsive web design, and Information architecture kept me pretty busy throughout the week.

The other big part of the conference was around social networking and of course having a good time partying in Vegas!

The Social Scene:
The official kick off must have been at the AvePoint Red Party!

These guys really know how to party. It was located at the TAO night club and there were sword swallowers, snakes, guys on drums and a whole lot of people dancing and having a great time.

There were a few other exciting parties but what happens in Vegas gets shared on social media so just look out for this guy… Those glow in the dark glasses from Avanade provide me an alter ego for when I went out at night.

Slalom Consulting xMarket Gathering:
So normally I would keep work stuff out of my blog posts but this meet up was too hard to leave out. We had a showing of over 50+ Slalom consultants at the conference this year. That is pretty amazing if you think about the total cost of ~$3,000 per head. We were all given neon green shirts to wear so that everyone could see us including the man on the moon.

It was great to finally meet some of the people you have only shared conversations with over the phone, Lync or email. But after our session together we stayed as a group and shared some pretty fun pictures over iCloud photo share. I truly love working for Slalom and there is no doubt in my mind why we have won so many awards for the best and healthiest companies to work for #SlalomProud.

Speaking at SP24:
On a side note, I will be speaking live at the first time ever SharePoint 24 hour conference. My session is around:

SharePoint 2013 Creating the Ultimate User Experience
In this session I will walk through best practices and tips and tricks for defining, designing and building a SharePoint 2013 UX project.

These activities include: Identifying what users want (Requirements). Taking those needs/wants and creating the experience with Axure interactive wireframes. Using current trends such as flat design to create mockups in Photoshop for a slick modern UI that is tailored to your business. And finally slinging some HTML/CSS to build the visual design for both desktop and mobile using basic CSS3 Responsive Design media queries.

Hope to see you at the session!

Attending SharePoint Conference 2014 Las Vegas!

noreply@blogger.com (Erik Swenson) — Fri, 28 Feb 2014 15:54:00 +0000

I will be Connecting, Reimagining, and Transforming myself at the SharePoint Conference 2014 in Las Vegas!

I will be at all the usual social events so hit me up on Twitter to meet up and share a beer and talk about User Experience, Branding, or whatever.
@ErikJSwenson
https://twitter.com/ErikJSwenson

If you are following the SPC14 Yammer Network you can also find me there as well.

See you at the party!

SharePoint 2013 Responsive Table Columns

noreply@blogger.com (Erik Swenson) — Tue, 28 Jan 2014 04:02:00 +0000

I have been wanting to write this one for a while now. It is really amazing how UX is really finding is way into everything that we use and interact with. From Custom applications both mobile and on a desktop to document management or large data visualizations. There is always room for better usability and new concepts.

SharePoint lists and library functionality really has not changed much for the past 10 years... I remember back in 2003 when I saw the same table/grid based views of documents and list items that exists in SharePoint 2013. But now we can look at them in a whole new way!

In this video blog you will see how to create a responsive CSS table so that when the browser size is reduced it will hide specific columns. However hiding data is not always the right thing to do. What if a user needed those columns to filter on or to use for comparison to another document?

Well that is where the custom jQuery Column chooser comes in. It allows you to see what columns are displayed and which ones are hidden. In the drop down it then allows you to choose on demand what columns to display. Basically I call this having a cake and eating it too!

Update: In the video I described the pseudo code incorrectly and was one column off. I will try to update the video once I have some time. Here is the correct explanation:

1st TH Column:
.ms-viewheadertr th:first-child

2nd TH Column:
.ms-viewheadertr th:first-child+th

3rd TH Column:
.ms-viewheadertr th:first-child+th+th

Below you will find the source code that I used for this project.

Complete Master Page, CSS & JavaScript:
Download Source

Thanks and Enjoy!

Referenced jQuery Code:
http ://www.filamentgroup.com/examples/rwd-table-patterns/
https://github.com/thepeg/MediaTable

I want to give a big shout out to my Slalom Consulting friends: Bendan Schoch for connecting me with the jQuery code and to David Lozzi for helping me with some code changes/fixes.

SharePoint 2013 Consistent Site Title & Description

noreply@blogger.com (Erik Swenson) — Tue, 07 Jan 2014 16:48:00 +0000

With the new year a lot of people are finally making the move to SharePoint 2013. They have either never used SharePoint before and are getting a brand new experience or they have ridden the waves of 2007 and 2010 and are taking the steps to upgrading to 2013.

With all the new great features of SharePoint 2013 I am still scratching my head on why the product team removed some basic features such as a consistent breadcrumb, site title, and description.

In the video below I describe how to add back in the SharePoint site title and Description and ways that you can transform your 2013 site to a more constant experience that you had in pervious versions of SharePoint.

Below are the code snippets that you will need to do this on your own.

Site Title:
<span class="custom-sitetitle"><SharePoint:ProjectProperty Property="Title" runat="server"/></span>

Site Description:
<div class="custom-sitedescription"><SharePoint:ProjectProperty Property="Description" runat="server"/></div>

Site Title Hyperlink:
<SharePoint:SPSimpleSiteLink NavigateUrl="~sitecollection/" runat="server" id="sitelink"></SharePoint:SPSimpleSiteLink>

Completed Master Page:
View & Download

Thanks and Enjoy!

Responsive Design for SharePoint 2013

noreply@blogger.com (Erik Swenson) — Thu, 06 Jun 2013 18:54:00 +0000

I have been wanting to write about this topic for quite some time. In this post I will review what all this buzz is about around Responsive design and relate it back to SharePoint 2013.

In this post I will not be focusing on any of the Twitter bootstrap or HTML5 boilerplate stuff. I will simply be focusing on CSS3 Media Queries and how it relates to SharePoint 2013.

In the video below I have put together some discussion points around min-width vs. max-width and also different ways that you can make SharePoint 2013 responsive with just CSS.

Per the video above here is the code that I referenced:

Simple Responsive CSS

Custom Responsive CSS

Overall I wish there were more standards on how and when to use these media queries. I will be looking forward to your comments and suggestions for more topics.

Thanks!

Small Calendar for SharePoint 2010 & 2013

noreply@blogger.com (Erik Swenson) — Fri, 12 Apr 2013 19:51:00 +0000

First off I would like to apologize for the lack of posts. I have been really busy with my new role as the UX Design lead within Slalom Consulting Boston. I will share more about that in another post.

In a previous post Create Really Small Calendar I showcased how to do this for SharePoint 2007. However the 2010 and 2013 calendar views have changed and therefore we cannot use the same method or CSS as 2007.

SharePoint 2010 Small Calendar:

SharePoint 2013 Small Calendar:

See video below for a video walk through on how to create a small calendar for SharePoint 2010 and & SharePoint 2013 with just CSS.

Per the video above here is the code that I referenced:

2010 CSS link reference in Master Page:
<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/smallcalendar.css %>" After="corev4.css" runat="server"/>

2010 CSS:
/**** Small Calendar ***/
.ms-acal-item{height: 10px !important;}
.ms-acal-sdiv,
.ms-acal-mdiv,
.ms-acal-ctrlitem,
.ms-acal-month-weeksel,
.ms-acal-title{display: none;}
.ms-acal-summary-itemrow TD DIV{height: 15px !important;}

2013 Content Editor Web Part CSS:
<style>
/**** Small Calendar ***/
.ms-acal-item{height: 10px !important;}
.ms-acal-sdiv,
.ms-acal-mdiv,
.ms-acal-ctrlitem,
.ms-acal-month-weeksel,
.ms-acal-title,
.ms-acal-month-top span{display: none;}
.ms-acal-summary-itemrow TD DIV{height: 15px !important;}
</style>

Thanks & Enjoy!

SharePoint 2013 Display Templates Overview

noreply@blogger.com (Erik Swenson) — Fri, 11 Jan 2013 20:12:00 +0000

SharePoint 2013 Display templates are one of the many new features in SharePoint 2013 Publishing site Design Manager.

In the following video blog I walk you through creating a mocked up wireframe that includes a image rotator, document, blog post, and task query. I created a custom Page layout and also walked through the process of customizing and creating your own display template. This is all possible with the use of the new Content Search Web Part.

Enjoy!

SharePoint 2013 Drag and Drop Navigation

noreply@blogger.com (Erik Swenson) — Fri, 11 Jan 2013 16:19:00 +0000

I came across a new feature in SharePoint 2013 that has not been really advertised much. This is around the site navigation management and the new feature that allows you to drag and drop links directly into the left side or top navigation.

I put together this quick video to showcase how it works.

SharePoint 2013 Photoshop Layered file!

noreply@blogger.com (Erik Swenson) — Sun, 25 Nov 2012 05:31:00 +0000

Thanksgiving just past and I was in the mood for giving! I just finished my SharePoint 2013 Layered Photoshop file. I have created these and shared them in the past for 2007 and 2010.

For this version I added in a couple of different templates and even some alternative background images for you to mess around with. All text, images, icons, logos, are editable and in their own layer. All fonts are to exact size per the OOTB RTM version of 2013.

Use this file as your starting point for all your new 2013 branding projects. Provide feedback by replying to this post!

Template Layers:

Team Site
Community
Publishing Portal

Download PSD File