The concept of this project is to create a Hololens version of an exisiting site and visually represent the industries and sub-industries they have.
The different clusters of industries are displayed in different colors and each industry has a logo or identifier that represents its type of industry.
The higher the buildings in a cluster, the more number of sub industries the industry have.
I have to re-work the UI of our current project and this was recommended to me. Sharing it here will save me some time from going back and forth to the conversation history or search through tons of my bookmarks. But this might be an interesting read for some, I hope.
A one-man SharePoint project that I worked on for more than a year after numerous changes of requirements, layout, data, etc.
Problem:
Since this internal website is access by tons of people around the world in a daily basis, the team wanted to make the website more attractive and informative at the same time. Plus, there are additional pages and data changes needed to be made in the site.
Previous Layout
Solution:
Apply the company’s color palette to the site
Instead of displaying a long description for the quadrants, display short informative descriptions instead and add the quadrant logos
Remove additional links (related links, download, etc.) and add them to the menu bar
Instead of just showing the site contact (where users usually request for a contact’s email address), add the entire team to the home page and a “new email” function will be triggered once the contact’s name is clicked
Note: The other sections I didn’t get to mention were new requirements. Also, I only showed the home page of the website in this post. There’s actually tons of pages I had to work on as well.
I always come across this problem when I’m working with website styles and most of the time I forgot how to stick the footer at the bottom of the page. I wanted a fixed footer that will stick at the bottom of the page regardless of what the screen size is but should only be seen when the page is scrolled at the end.
This is probably not new to most web developers but sometimes I still hear people suggest that they use SVG to build their interactive maps. I know, SVG or HTML canvas is a good choice especially with all those animations that you can apply on your code to make your map look appealing (not sure if that's the best word to describe it) plus it has good quality image resolution.
But in our case, some of the projects that we handle only need a basic interactive map. Just a simple point and click, then the page or description of that selected country will be displayed. For them, the contents are more important than the design itself. Animations/Effects are just nice to have and not part of the project requirements.
So, back to the point where I was wondering why using SVG was their first thought. Probably because most of the people in my team prefers working on the back end and so they aren't familiar with any other options? Every time I asked them, they will just say "because we need to make an interactive map…and we can create one using SVG.". I didn't dig in more to the question and I never judged them by their answers since I'll probably be in the same scenario when we talk about back-end development. Haha! (I have a love-hate relationship with C#...)
To lessen the burden of these teammates of mine (who mostly have no patience at all when it comes to front end development), I would then introduce to them HTML's <area> tag. A simple and less complicated version of the SVG interactive map. Yes, just a simple map image with clickable areas because every time I check the project requirements, this simple solution is all they need.
How to use HTML area tag:
usemap - The ID of the map tag you’ll be using
map name - The ID of your map tag
area shape - It can either be default, circle, rect, or poly
coords - The points of the area you want to select
For rectangular shapes ("rect"), the coords attribute will take four values: x1, y1, x2, and y2. These values define the top-left corner of the rectangle (how many pixels along and down from the image’s top-left corner the boundary will appear), and the bottom-right corner (how many pixels along and down from the image’s top-left corner the boundary will appear).
For circular shapes ("circ"), three values are required: x, y, and r. The x and y coordinates tell the browser where the circle’s center point is, while the r value specifies the radius of the circle.
Polygonal shapes ("poly"), which are almost always created using a WYSIWYG HTML editor such as Dreamweaver, are defined by a series of x, y coordinates, each of which relates to a point on the polygon’s outline.
Note: You can also add an ID to the area tag and make use of the jQuery click function to display a div of map description on the same page instead of redirecting to another URL.
Now, you might be wondering how to determine the exact coordinates of the area? Well, here’s my trick: a map generator
Why post about this topic?
Recently, some of my teammates end up asking help from me regarding about “interactive map, clickable areas, SVG, etc.”. I then decided to keep track and post here all of the common questions/help needed they asked from me.
For this post, I’m categorizing the Card Sorting into a UX Technique in the meantime because based on my current project, this activity became a technique to simplify our jumbled site map. Card Sorting is considered to be a UX Information Architecture but I’ll define it that way in another post.
I’m not actually sure when is the perfect time to do card sorting in a project. In the case of the project i’m working on, it was in the middle of the development when we did a card sorting. It was sort of a preparation for the next release (version 3).
Since the project is practicing its “Agile Process”, we can’t control the changes in the application sprint after sprint. With all the ideas and suggestions, our site now holds quite a lot of information and definitely automated a lot of things but it wasn’t user-friendly anymore. Our site map itself became too complicated. And so, the card sorting idea happened.
Not familiar with card sorting? Here’s a informative link for you: CLICK HERE
Grouped together are the developers, testers, BA, PM, and the Scrum Master of the project. Other users were scheduled in a different time to not conflict them with the card sorting decision of the team. The team is flexible to practice other roles. But this time, we should be in the role where we had a lot of experience with in the project. I fall in the developer side here. It was definitely hard not to be biased while sorting the cards into its categories.
Basically, we created groups that serves as the main pages of the site and written on the individual cards are the features available in the site. As much as possible, We must group these features into its respective main pages (groups) according to where they were expected to be rather than to where they are now based on the site we’ve created.
This process took us quite some time before we were able to group all the features together. Discussing each and every feature before placing them into groups. Like to what is the feature about? Does this feature makes sense at all or does it just make things complicated? And so forth..
With this activity, it somehow helped turn the messed-up site map into a clean and organized site map.
Pardon for the intentional blurry parts of my photo above. Due to my colleagues privacy and the company’s rules, I had no choice but to blur them out. The main purpose of this photo is to provide an example on how card sorting works.
Why post about this topic?
It was my first time to actually use card sorting in a project. It was definitely a lot more confusing in real life compared to the online training video I’ve seen.
A while back, my colleague shared her points about UX Design. After the short discussion, I realized that sometimes it’s always nice to go back to the basics. Day by day we always learn something new. But as we progress, we often define a terminology based on its process and not from its basic definition anymore. Sharing these principles here so that it won’t get lost in my files. Also, you may learn a thing or two about UX designing. Hitting two birds in one stone~
UX Process
1. Strategy - articulates the brand, guiding principles, and long term vision of an organization. This will shape the goal of the project.
2. Research (discovery phase) - will comprise of significant user and competitor research activities. This is the key to creating an informed user experience, however it is also the phase most often skipped.
3. Analysis - draw insights from data collected during research phase. Helps to confirm all the assumptions being made are valid.
4. Design - should be collaborative (involving input and ideas from different people) and iterative (it cycles back to validate ideas and assumptions). It is usually presented by wireframes/paper prototype (low fidelity)
5. Production - where high fidelity design is fleshed out
UX Techniques
1. Contextual Inquiry (Research) - Interviewing and observing users in the location that they use the website/app, to understand their tasks and challenges. This information feeds our understanding of why users might behave as they do.
2. Personas (Analysis) - A fictitious identity that reflects one of the user groups for whom you are designing. This technique captures the who of our definition of UX.
3. Scenarios (Analysis) - A narrative describing “a day in the life of” one of your personas and how your product fits into their lives. This usually covers the what, when and where form our definition.
4. Wireframes (Design) - A rough guide for the layout of a website or app. It could be low-fidelity (communicating rough layout information), or high-fidelity (with visual polish). It could be static images or sketches, or an interactive prototype, with clickable elements that stimulate the priduct in use. Wireframes and prototypes explore how someone will use the product.
5. User Testing (Research, Analysis, Design, Production) - Observing people while they attempt to complete tasks using your product or prototype, and thinking out loud while they do so. These sessions may validate design decisions, or (more likely) reveal additional information about why users behave as they do. Processing these learnings will influence future iterations of the product.
UX Design Checklist
1. Utility - does your design provide the features needed by the user?
2. Usability
Learnability - how easy is it for users to accomplish basic tasks the first time they encounter the design?
Efficiency - once users have learned the design, how quickly can they perform tasks?
Memorability - when users return to the design after a period of not using it, how easily can they re-establish proficiency?
Error-proofing - how many potential errors will users make, how sever are these errors, and how easily can they recover from the errors?
Satisfaction - how pleasant is it to use the design?
3. Human Factors
Psychology - is your design intuitive? Is it tasteful relative to today’s norms?
Demographics = is your design apt for your target users
HCI - does your design make the most out of hardware interfaces (like touch, gestures, mouse, keyboard)?
Accessibility - does your design consider or provide alternate experiences for human disabilities?
Ergonomics - does your design maximize user comfort and minimize risk of injury?
UX Design Principles
1. Don’t make users think
2. Krug’s 1st law of usability – webpage = obvious and self-explanatory.
3. Your job – get rid of question marks
4. Navigation and site architecture should be intuitive:
- Need to know how users go from point A to B
- Clear structure
- Moderate visual clues
- Easily recognizable links
5. People won’t use your site if they can’t find their way around it.
6. Don’t squander user’s patience.
7. Try to keep your user requirements minimal
8. Less action required from users to test a service the more likely a random visitor will try it out.
Why post about this topic?
To remind myself about the basic principles of UX Design.
vaporwave
areudirty
origamiaround
turnnoffyourmind
kianamaiart
blakekathryn
tangentwithtanner