#42WeekHitchhikersGuide – This is the first week in The Hitchhiker’s Guide to the Galaxy, 42 week blog challenge. Here I’ll be documenting my journey into understanding and surviving in the mysterious world of UI / UX and CX. This week will be a Glossary to get us started.

Week:  1 of 42, 41 left

This week’s best line from Douglas Adams’ The Hitchhiker’s Guide to the Galaxy Series:  “There is a theory which states that if ever anyone discovers exactly what the Universe is for and why it is here, it will instantly disappear and be replaced by something even more bizarre and inexplicable. There is another theory which states that this has already happened.”

As I’m rather creative and I’ve had the opportunity to work with SharePoint for many years, I’ve always had a fascination with the User Interface. Of course this directly influences user adoption as well, which just fuelled my curiosity. I’ve never really been able to write code from scratch, so over the years I’ve learnt some tips and tricks which allowed me to do some really cool things in SharePoint with code snippets.

Over the next 42 weeks I will be sharing theoretical and practical tips with you. Recently I used a Bootstrap template to build my new site, have a look – I think it turned out awesome. Thanks Alistair Pugin for empowering me and helping me get started on this. I’ll definitely be sharing what I’ve learnt from this experience as well. I do believe this is the best way to learn – while doing something that makes sense to you. Hopefully this challenge will help me (and you) understand a couple of things better.

Definitions:

First I think we need to understand the difference between UI, UX & CX.

UI = User Interface

UX – User Experience

CX – Customer Experience

inter|face

[ˈɪntəfeɪs]

NOUN

  1. a point where two systems, subjects, organizations, etc. meet and interact:
  2. a device or program enabling a user to communicate with a computer.

ex|peri|ence

[ɪkˈspɪərɪəns, ɛkˈspɪərɪəns]

NOUN

  1. practical contact with and observation of facts or events:
  2. an event or occurrence which leaves an impression on someone:

User Interface consists of all the screens, pages, buttons, icons, etc. that humans use to interact with computers / systems / devices.

User Experience is based on the success rate of your interaction with the system. Can the task be completed successfully? Are the requirements met? I’m thinking this is where UAT (User acceptance testing) comes in.

Customer Experience is the overall experience when using the system. This is all about the brand / product.

So in my own ‘laymen’s terms’ way – this is how I see it (and of course I’ve had to draw a picture to understand it better).

UI is the tools we use to consume or interact with the content. That delivers UX which is a working system. CX is the experience we get from it. Yup – I also thought Gordon Ramsey was the perfect CX poster child. 🙂

Let’s look at some other definitions that we’ll be using over the next 42 weeks, and of course we’ll be sure to add many more. (Thank you Wikipedia for the definitions).

Colour Models:

  • CMYK – The CMYK color model (process color, four color) is a subtractive color model, used in color printing, and is also used to describe the printing process itself. CMYK refers to the four inks used in some color printing: cyan, magenta, yellow and key (black). Though it varies by print house, press operator, press manufacturer, and press run, ink is typically applied in the order of the abbreviation.
  • HEX – A hex triplet is a six-digit, three-byte hexadecimal number used in HTML, CSS, SVG, and other computing applications to represent colors. The bytes represent the red, green and blue components of the color. One byte represents a number in the range 00 to FF (in hexadecimal notation), or 0 to 255 in decimal notation. This represents the least (0) to the most (255) intensity of each of the color components. Thus web colors specify colors in the True Color (24-bit RGB) color scheme. 
  • RGB – The RGB color model is an additive color model in which red, green and blue light are added together in various ways to reproduce a broad array of colors. The name of the model comes from the initials of the three additive primary colors, red, green and blue.

GUI – The graphical user interface (GUI /ɡuːiː/), is a type of user interface that allows users to interact with electronic devices through graphical icons and visual indicators such as secondary notation, instead of text-based user interfaces, typed command labels or text navigation. GUIs were introduced in reaction to the perceived steep learning curve of command-line interfaces (CLIs),which require commands to be typed on a computer keyboard.

Heuristic Evaluation – A heuristic evaluation is a usability inspection method for computer software that helps to identify usability problems in the user interface (UI) design. It specifically involves evaluators examining the interface and judging its compliance with recognized usability principles (the “heuristics”). These evaluation methods are now widely taught and practiced in the new media sector, where UIs are often designed in a short space of time on a budget that may restrict the amount of money available to provide for other types of interface testing.

Icons – In computing, an icon is a pictogram or ideogram displayed on a computer screen in order to help the user navigate a computer system or mobile device. The icon itself is a quickly comprehensible symbol of a software tool, function, or a data file, accessible on the system and is more like a traffic sign than a detailed illustration of the actual entity it represents.[1] It can serve as an electronic hyperlink or file shortcut to access the program or data. The user can activate an icon using a mouse, pointer, finger, or recently voice commands

Image File Formats:

  • JPEG – Joint Photographic Experts Group is a lossy compression method; JPEG-compressed images are usually stored in the JFIF (JPEG File Interchange Format) file format. The JPEG/JFIF filename extension is JPG or JPEG.
  • PNG – Portable Network Graphics file format was created as a free, open-source alternative to GIF. The PNG file format supports eight-bit paletted images (with optional transparency for all palette colors) and 24-bit truecolor (16 million colors) or 48-bit truecolor with and without alpha channel – while GIF supports only 256 colors and a single transparent color.Compared to JPEG, PNG excels when the image has large, uniformly colored areas. Even for photographs – where JPEG is often the choice for final distribution since its compression technique typically yields smaller file sizes – PNG is still well-suited to storing images during the editing process because of its lossless compression.
  • GIF – Graphics Interchange Format is in normal use limited to an 8-bit palette, or 256 colors (while 24-bit color depth is technically possible). GIF is most suitable for storing graphics with few colors, such as simple diagrams, shapes, logos, and cartoon style images, as it uses LZW lossless compression, which is more effective when large areas have a single color, and less effective for photographic or dithered images. Due to GIF’s simplicity and age, it achieved almost universal software support. Due to its animation capabilities, it is still widely used to provide image animation effects, despite its low compression ratio compared to modern video formats.
  • Raster / Vector Images – As opposed to the raster image formats (where the data describes the characteristics of each individual pixel), vector image formats contain a geometric description which can be rendered smoothly at any desired display size.
  • SVG – Scalable Vector Graphics is an open standard created and developed by the World Wide Web Consortium to address the need (and attempts of several corporations) for a versatile, scriptable and all-purpose vector format for the web and otherwise. The SVG format does not have a compression scheme of its own, but due to the textual nature of XML, an SVG graphic can be compressed using a program such as gzip. Because of its scripting potential, SVG is a key component in web applications: interactive web pages that look and act like applications.

Intuitive Design / UI – Easily understood and simple to use.

Wireframes – A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website.

WYSIWYG – is an acronym for “what you see is what you get”. In computing, a WYSIWYG editor is a system in which content (text and graphics) can be edited in a form closely resembling its appearance when printed or displayed as a finished product, such as a printed document, web page, or slide presentation.

Now, as part of my blog challenge I would like to feature someone every week. Whether it be advice, tips & tricks or a code snippet they’d like to share. This week’s Babel Fish is brought to you by Alistair Pugin:

“UX in IT is like telling a child to paint and then halfway through, you hand them crayons. Developers are not UX people. Their brains are not wired that way. Do not for one minute think that you do not need UX. That’s like the Pope not needing the apostles.” – Alistair Pugin


Till next week. Know where your towel is and always be thankful for the fish 🙂

Disclaimer: I learn new things every day. I change my opinion every day. I am far from an expert on any of the topics I blog on. I invite your comments, additions, corrections and greater insights. If you get value from my musings, please tell me & give me feedback. Like and share my posts if you feel more people can obtain value from this. After all – the WWW has supplied us with a free education system that should be used.