Manage a Website – Design

Design
Design

This is the second element about websites. In this article, we’ll describe some bases of designing websites. I could say when I’m having hard times in a website to get what I’m looking for. Do you remember the rule of 3 clicks? So, we’ll talk about design thinking, display resolutions, UI and UX and other cool subjects. I’ll not cover Photoshop courses or discuss about color theory.

Design Thinking

If a website was build thinking in people, so, these people must have a special place in all phases of the project. This is because those people will use the website, as simple as that. Design thinking is a splendid tool to achieve excellent results on this. It consist in five elements:

  1. Empathize: Get from users what they want. Key words: observation, users, learn, analyse, needs.
  2. Define: Visualize the norm, what is common among users. Key words: patterns, whole idea.
  3. Ideate: Design prototypes from the user’s patterns. Key words: solutions, classify, design.
  4. Prototype: Create functional prototypes. Key words: materialize, concretize, specific ideas.
  5. Test: Feed your project with users’ feedback. Key words: iteration, feedback, improvement.

As analyst, I’ve built so many modules that were, firstly, functional, and then after beauty came to them. I think the must important of those experiences, was having a strong communication with end-users. It was fun, because it allowed me to get as far as I wanted. We worked together like a temporary mini-team, until they were experts of the module. I learned so much from them. They gave me, without ask them, what I was looking for: information to adapt it into the web application.

Website Components

Designing a website is similar to the job tasks of an architect when he/she is working on houses. It consists in thinking and imagining how well distributed will be the rooms in a given space. Many principles come to us: harmony, ergonomics, standards, light, balance, etc. Same for websites, we need to think, imagine how’s our website will be once published.

In my career, I made a lot of websites, modules, and web services. I can identify four elements:

documents
Content
database
Processor
skin
Apparel
v8 engine
Capabilities

Content

This is what we want the visitors read, learn, consume. We need a team responsible of information. Responsible of the validation of what content will be used until its publication. This team will verify quality, check several times the spelling and grammar on the language of publishing and future updates.

Processor

This part is composed by a database where our content will be stored. A hypertext processor like PHP to display content on our browsers. The use of a database for websites is now unavoidable. Our information is invaluable, and it must be stored into a secured place and be well designed. If it’s relational, well, our data wont be redundant and integrity and accuracy will be ensured. But, if we prefer to work with a document store, we’ll taking a step forward into the future.

I’m feeling weird when I visit a website where its content is static, it has no life, I can not interact with it. It seems as one way: website -> visitor. I think more and more visitors are giving life to websites, feeding them with comments, ratings. And that’s good! In other hand, visitors are feeling that websites are useful to them when they get results efficiently and what they want.

Apparel

Information needs to be well presented in a proper way. This is like our clothes. The difference, is that websites will wear the graphic design for months. Rarely, rarely for many years will use the same graphic design. It depends on the allocated budget for each company; the design can be affected, for example, by re-branding or changing a logo.

If we have a WordPress‘ Blog or use Drupal CMS for our website, we can change the way it displays our information whenever we want.

A aesthetic website will always be attractive. This task is assigned to the designers and communication experts. Think out of the box principle is implicit here.

Capabilities

Follow your intuition and common sens, and add some logic. Follow browsers’ improvements (updates). There are several browsers and maybe each one of those have versions for each OS. So, it’s a good idea to be aware of their limits to give to our public a fabulous impression. So, let’s get this WOW, that will make visitors to return, maintaining their fidelity.

An example of Design Thinking on Expedia.

expedia popup

If you have used or are using Expedia for looking for a trip to the place of your dreams, you’ll see a popup at the bottom of the screen telling you that X number of people are shopping for the same place right now. This popup is displayed for few seconds and then disappears. This right now is curious because it tells us that a calculation was made of the total of current visitors and that are looking for a trip for the same place as yours.

Expedia Menu

Another example of capabilities we can find it at the menu on top of the page. Always looking for the WOW of your audience. The number at the bell’s telling you there are messages for you. The third item on the menu tells us we have 5 trips stored in My Scratchpad. This is very useful if we’re comparing prices, places, options or schedules. This information is stored in their servers momentarily, if we’re not logged in, but if yes, Expedia keeps them until you delete them.

Yahoo Mail

I’m pretty sure that you’ve already noticed on email platforms like Yahoo, Gmail or Office 365, the possibility of attach files that are stored: in your current computer, in a cloud file storage like their own system or third-party services like Dropbox.

Is very useful letting people concentrate in their text without having to stress pressing the Save icon every sentence or word to save the text. It is magic?

On a website that’s selling concert tickets, can you see how many tickets remaining and where are the available spots on the map?

Of course, there are a lot more of stupendous examples of capabilities out there that I can’t show here. Think in what the website can help people to do things better, be efficient and don’t forget catching the WOW from your audience!

Display resolutions

Nowadays, more and more websites are responsive or mobile friendly. I would say that there’s a wave of adaptability where more and more websites can be displayed on a lot of devices’ screens. If we don’t want to continue to loose more visitors/clients, our website will need to be visible and functional in a lot of devices.

As we said before, take care of adapting information to devices and browsers. A good example is Microsoft API and Reference Catalog or its Reference Source of .NET Framework, we can get same information in a 17″ laptop screen or in a 5.1″ smartphone screen. Following the trends, 1366×768, is among others, the most common display resolution in the market.

Here’s a graphic that shows the list of common resolutions and its correspondent display ratios of screens, from CGA to the so recent 4K resolution:

Common display resolutions
Common display resolutions

Now, for the smartphones display resolutions, visit: http://mydevice.io/devices/

When you’re designing a website, think in mobile first (PC and Laptop in second place). This is for many reasons: many people has a smartphone or tablet in hands, almost all day; smartphones have technology capable to display HTML code, execute JavaScript and add style to code.

I found these standards from W3C (Web pioneer) describing technologies, specifically for Web Apps, and how they be applied to mobile devices. Good read!

User Interface (UI)

In early days, when computers were really big machines, the user interface was very rickety, very basic, not letting too much input to able human interact with the machine. Many years passed and then many devices were invented: mouse, pencil, touch-screen and then smartphones. Back to our context, users interact with our website, clicking some buttons or links, and having experiences when the pointer is over an element and activates a function or when rolling down the wheel to get a given effect like hidding or showing elements.

Do you remember golden times of the Web? What do you think about this UI?

The Webby Awards. 1997. Travelocity.
The Webby Awards. 1997. Travelocity.

And now (June 2016):

Travelocity
Travelocity in 2016

This version will display results according your input, and react to your preferences. This version has a lot more of functionalities and the UI is more inviting to contribute to the success of our project, isn’t it? Look at the background picture and the special effect of transparency of the form. Little things do big changes.

Here’s a Big poster to get it closer or in front of your desk: 10 commandements of User Interface Design from Evan Brown.

Prototype

A prototype is part of the design process where you put together your ideas and make them real. End-user has important role here because its feedback is essential. At this phase of our project, it is not necessary a superduper powered software to build a prototype, just as simple as a paper sheet (or a ream of paper) and a pencil and the most important of all: team’s ideas!

ELiving Campus Paper Prototype
ELiving Campus Paper Prototype

 

Cognitive Walkthrough
Cognitive Walkthrough

Front-End

Part of the User Interface is the Front-End. It’s the first impression that we made on our visitors. Imagine how do you want to feel when you visit your own website. Now do the test to other people. Navigate other websites, there are millions of them. For this, Google Analytics is an excellent tool, you have to configure properly for obtain desired results. We’ll discuss about it later.

An excellent user interface example is Reuters TV website:

reutersTV
reutersTV

User Experience (UX)

This is a core element of our website goal: keep audience’s fidelity. I’m pretty sure that each of you have memories of those moments you love. We keep them because we feel good or invincible, or maybe we remember to feel better when those bad moments come. Did you watch the Inside Out movie? There’s a scene when Joy and Sadness are into the “Memory Dump”, and they try to escape from it. That place is where bad experiences are stored and eventually will be destroyed (defense mechanisms). So, same for our tech experience, if our website exceeds our expectations, it’s very very possible that we return, and forget those that caused pain to us. At this point, is very difficult to regain audience, and it’ll require a lot of work.

The Elements of User Experience from JJG. It’s a good read for those who want the best user experience for their audience.

The Spectrum of User Experience shows interactions between prototyping, visual design and business analysis.

The Spectrum of User Experience: Preparing the next blog entry
The Spectrum of User Experience: Preparing the next blog entry

Personas

In other words, case scenarios or case studies. Creating personas is a way to see clearly how each fictional user will achieve a given process. Analyzing personas on how they interact with the website, and we can improve processes and experiences. If you want learn more about it, there’s an excellent article about personas from .

Later on these posts, we’ll talk about control, and how analytic tools, like Google Analytics, can help in this point.

A great book to read about personas: Miaskiewicz, T. & Kozar, K.A. 2011, “Personas and user-centered design: How can personas benefit product design processes?”, Design Studies, vol. 32, no. 5, pp. 417-430.

An excellent example of User Experience:

Because Recollection
Because Recollection

Customer Experience (UX)

Did you hear about CX? Recently, I had an experience (let’s leave it as a simple experience) when a freelancer presented her work as if it’s the only bottle of water in the desert. Then I told to myself =0 !! Some people think there’s no more people doing the exactly same job, only them! It’s not the object/service itself we’re getting, but there’s more: how we feel when we’re shopping? There’s something that encourage me to return? Or there’s a reason to maintain fidelity?

For example, we consult a newspaper website, in a daily basis, because they publish interesting articles or because we have similar way of thinking. What about when we contact by phone a company to complain about a product we got online, and we’re enmeshed in the calling system, specially when we’ve already pressed like 10 digits and then we’re at the wrong spot. In this case, there’s something

Here’s another good read for you about customer experience: What is customer experience? 19 industry experts weigh in from Spencer Lanoue.

 

Thanks for read and learn, I’ll be glad to see you in the next article!

Leave a comment