The Elements of User Experience – J.J. Garrett

Rachel Rose with the book The Elements of User Experience.

The Elements of User Experience by J.J. Garrett proved a stimulating and thought-provoking text book which gave substance to my UX Design Course. I loved the book, and made time almost every evening to read a few pages. Upon awakening, I would try to remember what I had read the night before.

Studying is a slow and steady quest. Rarely can I dedicate large chunks of time to my course, but I chug along. I could have rushed into Part Two of the course, Start the UX Design Process: Empathize, Define and Ideate. But, I thought it wiser to buy the two books referenced in Part 1 and thus gain a more solid footing in the material. (The other book is The Design of Everyday Things. More on that later…)

UX

User Experience (UX), like many things tech-related, is a relatively nascent field. As we have broadened and deepened our relationship with technology, we have become more discerning and habitual in the way that we wish to interact with the tech. Making the user adapt to the company’s or the programmer’s vision (or bias) is no longer acceptable. It is a sure path to ruin in today’s competitive online market.

Enter UX. Twenty-five years ago, with insensitive regularity, tech savvy folks would sniff that “the user just has to adapt to the interface”. Since then, certain standards have been established that make information design and interface design more predictable and, well, usable. After all, that’s it: what we want to achieve with UX is a usable site that aligns with the product objectives.

The 5-Elements UX Model

Garrett identifies 5 User Experience planes: Strategy, Scope, Structure, Skeleton, Surface. The Elements of User Experience is a model that accommodates both information and interface design.

The author begins by explaining that the two points of view are opposite but equally necessary. Those who look at the Internet as a big database, who think mostly about the search for and delivery of information, view web development from one perspective. Those who see the Internet as more of an “app”, as something that lets you do something, contemplate it from another perspective. JJ Garrett came up with a model that serves both standpoints.

The Elements of User Experience

The UX 5 Elements Model (graphic)

This image is adapted from Garrett’s original work (2010)

A full description of the theory and application of the Elements of User Experience Design is well beyond the scope of this post. What I hoped to do is comment on a few things about the book and the course.

Takeaways from The Elements of User Experience

First of all, it is perfectly possible to do the UX Design Course and not read this book. I undertook this as an extracurricular activity and am I ever happy that I did. The course description of the five elements of UX is more than adequate. But, the book gave history, breadth and depth to the subject.

Secondly, Garrett is extremely good at defining common terms. It can be easy to think that you know the difference between interface design and information design, but some assumptions are not always true. Furthermore, it is good to challenge your own understanding. I feel much more confident now in distinguishing between the different parts of a web site or app.

Thirdly, reading this book helped me to perceive a bias that I did not know I had: I am an information person and have always approached the Internet from that perspective. Despite being a lover of pretty things, I was always thinking about the information. I discovered that bias whilst reading this book and now look at UX Design from a different perspective.

Fourthly, there is some Google bias in the UX Foundations Course. This is a criticism that I had seen levelled at the course, so was looking out for it. A fair chunk of time is dedicated to the “Design Sprint“. The Design Sprint is typically a week-long intensive in which the prototype design of a project is hashed out. Interestingly, in the last section of Garrett’s book, he says:

“Product development is rarely a sprint…thoughtful, deliberate design decisions will cost you time in the short term, but they will save you much more time in the long term.”

The Elements of User Experience, page 160, JJ Garrett, New Riders Press.

Fifthly and finally, Garrett emphasises the importance of planning and documentation. Every site I have ever created has been done on the fly. When it is for personal use, this is fine. But for professional work, improvisation will only get you so far before confusion, conflict and cracks begin to show. So, point taken. From now on, planning, wireframes and design comps are the order of the day.

Conclusion

The Elements of User Experience was an invaluable book and an excellent time investment. I was really grateful to the print book! Why? Well, I am studying alongside my busy work schedule and I don’t always want screen time just before bed. We all know how that turns out, right? To have a real book to read, just before bed, highlighter in hand, was just…lovely.

I am halfway through the second part of the course. I will keep you posted. Thanks for reading!

Cheers,

Rachel

Alteayoga UX User Survey

A web site redesign needs UX and to define UX, you need a User Survey. So, using the Elements of User Experience, I created a User Survey. I will compile the results once they’re in. Let me fill you in on the background. Read on.

The Elements of User Experience

The Elements of User Experience is a fantastic companion of the UX Certificate course I am doing. This book teaches you how to think about web site design from two distinct but equally necessary perspectives. Web sites can be viewed as depositories for information storage and retrieval, or they can be seen as applications, that allow you to “do” something. To accommodate both points of view, Jesse James Garrett developed his theory, the Elements of User Experience.

The Five Elements of UX are Strategy, Scope, Structure, Skeleton and Surface.

Alteayoga logo - the site being redesigned according to the Elements of User Experience.
Alteayoga

Alteayoga is the name of my yoga project. I currently use alteayoga.es, but have alteayoga.com parked on Google. I will design the site with Webflow, a platform that we looked at in the Part 1 of the course, Fundamentals of UX Design.

The first thing I have to think about is the Strategy. To decide the Strategy of the site we are designing, we have to define two things: the product objectives and user needs. The product objectives are defined by the site owner or stakeholder, while user needs come from the users.

Thinking carefully, I figured out what I want, but how do I know what the user wants? To find out, I created a User Survey based the Elements of User Experience.

Product Objectives

Taking pen to paper, I defined my objectives – or, my strategy – for the redesign of Alteayoga.com. From my side, I want Alteayoga.com to

  • Open me to a more international/English speaking market.
  • Allow me to book and manage requests for online classes. (I often get such requests from students/patients who meet me on their visits to Altea).
  • Let me sell the yoga videos, meditation music and guided meditations that I create.

User Needs

To define the user needs, I need to do some research. Accordingly, I used Google Forms to create a short survey. My aim was to keep it short, neutral and simple.

To define my strategy, I need to know if my users use online wellness classes and if so, via what platform. Do they read wellness blogs and subscribe to them? Do they subscribe to wellness email lists? Knowing this will allow me to decide how I present the material and the project.

User Survey

If you’ve read this far, maybe you can give me five minutes of you time? The forms are hosted on Google Drive, but you don’t have to log into to access them.

Here is the UX User Survey in English: Alteayoga UX User Survey

Aquí tienes la encuesta en español: Alteayoga UX Encuesta Usuario

Conclusion

I hope to get a few responses, so that I have some material to work with. Even though I am taking longer than suggested to do the course, I truly feel that applying the methods contained in the course gives me the best chance of success. The course is very practical, and we will create a UX portfolio, but behind that, I need my web sites to be solid. So, here’s to defining my strategy!

Adobe Creative Cloud: Levelling Up

Adobe Creative Cloud is about levelling up! I decided to increase my membership level and subscribe to the entire Creative Cloud suite. It’s really exciting to get access to all those fabulous, industry-standard apps!

My go-to apps are Open Source. The philosophical stance (free, collaborative software) fits my DIY ethos. Way back in the 1980’s, when I was but a little punk rock chick, DIY culture was the the order of the day! We used to make mix tapes, photocopy zines, sew our own clothes and cut our own hair. There was a real vibe about doing it yourself.

When I first got into Internet, DIY culture was still going strong. In fact, the early net was all DIY. I remember my first IT jobs – there was practically nobody with Computer Science degrees! We were all self-taught and therefore, hackers. We hacked around in the back end until we made it work, and that was that.

Obviously, this method is not scaleable. In order for the Internet to grow, there had to be order, consistency and method.

Linux went from being DIY to distributions. WordPress, while still free, uses plenty of paid plugins. And OpenSource design software like Gimp and Inkscape works fine…but doesn’t have the polish of Photoshop or Illustrator. The pattern fills in Inkscape are shockingly simple. I am sure that I could find some user generated patterns, but that would mean digging around the Internet, and a time investment. At the end of the day, I don’t have time for that, and choose to pay for the professional option, rather than pay with my time.

So, by subscribing to Adobe Creative Cloud, I am levelling up! As I was about to publish, I realised that I ought to have created a graphic for this post, so I saved this as a draft and came back to it later.

I logged onto Creative Cloud and installed both Photoshop and Illustrator. (Adobe Acrobat DC was installed this morning, in order to edit a PDF for Hacienda, the Spanish taxman…but that’s another story!) Lickety-split, I made this combined graphic from the wordsoup from yesterday’s post, a photo from a session last summer, and a lovely iridescent fill provided in the app. If the workflow is this good, then the money investment is definitely offset by the time saving.

Rachel Rose meditating, with a concentric circle of words.

(Editing before posting, I realise that I need to make a background for the text so it stands out. Tomorrow. Right now, time to go to the beach and get the best sunshine of the day. Peace out, RR)

Personal Branding – UX Design Course Extra Study

I decided to do some extra study about Personal Branding for my UX Design Course. Personal Branding for UX and design is essential these days. You have to stand out! Part One of the Google/Coursera Foundations of UX Design Course included an in-depth discussion of personal branding. As aspiring UX Designers, we shall be called upon to present ourselves to the world, and sell ourselves as professionals. Although I finished the Module easily, I decided to study the element of personal branding in greater depth, dedicating a significant amount of time to it in the past three weeks.

How do others see me?

A screenshot of my Facebook post for my personal branding for UX course
Ask Facebook…

Personal Branding for UX Design is about establishing your online presence as a UX Designer. For newbies, this essential step both prepares us to present a portfolio to potential clients or employers, and solidifies our self-impression of ourselves as UX Designer.

It was particularly intriguing to compare what I think of myself to how others see me. I set the barrier very high for myself and think that healthy self-criticism is essential for both knowing oneself now, and growing in the future. My tendency is to be very direct and I know that this can sometimes be hard to take.

So, I asked on Facebook. Hey, it’s 2021, what else am I going to do? I am so grateful to all the friends who took some time to help me. I ended up with 200 words to work with for personal branding. The ones that showed up time and again where hardworking, perseverant, high expectations, friendly, creative, offbeat/original, intelligent, direct and “todo terreno”, which in Spanish means “all terrain”. Well, those fit pretty much with my own idea of myself, so the experiment was a success!

Comparing other UX Designers’ Personal Branding, I noticed a lot of originality, breadth and creativity. This emboldens me to present myself pretty much as I am. This may sound obvious, but as a rather zany character, I often felt compelled to “hide” parts of my character rather than shout it loud and proud!

Autodidact

What I did add, and which no one else flagged up, was the word “Autodidact“. As you will see from my about section, I am good at a lot of different things. I have a relentlessly curious mind, verge on the restless and honestly do not know what it means to be bored. There is always something to learn! “Thank goodness I do yoga and meditate” say I, only half-jokingly. My need to learn is constant. When I face a problem, or encounter something unknown, I study it. I make notes. I create a mental map of it, integrate it, and make it fit with the rest of the encyclopaedia I carry around in my head.

autodidact definition

My resume now lists the winning words. I created the graphic below with Inkscape. All the words, both in Spanish and in English, are arranged. I chose the circle because it suggests both an eye (seeing myself) and a spiral into the centre.

a wordsoup graphic for my personal branding survey

Now that I have finished this exercise with gusto I will jump back into the course, on Part Two. I can’t wait! check back for more reflections and musings. I really must get an email list going…

Take care,

Rachel

IP: Intellectual Property Course

IP: Intellectual Property course

Intellectual Property, or IP, is a subject that affects all creative people. As a singer-songwriter, I compose songs (melody and lyrics). Using my Ableton DAW, I do enough production to be something of an arranger. A number of self-penned and self-published works is available in formats like Soundcloud, Youtube and Instagram. So, I wonder:

If I have published something online, is it mine or do I lose the right to it once it is in the public domain?

-rachelrose

The answer may lie in the course I am currently following: “Curso de propiedad intelectual en el sector musical (nivel básico)” [Intellectual Property Course in the Music Sector (Basic Level)]. This four-module course is offered by Ainara LeGardon via her web site https://legardon.net/

Ainara LeGardon

LeGardon is a Spanish musician from the “Basque Country”, a mountainous coastal region of Northern Spain. She became specialised in IP out of necessity. Like many independent artists, LeGardon became increasingly wary of publishing and record deals, and so began self-publishing her art in 2003. Here she is in action:

LeGardon announced the course on her Twitter account. So, I immediately emailed to reserve a place and was fortunate to secure one as places were initially reserved for members of the musical collective Musika Bulegoa whose aim is to support artists working in the Basque language, Euskadi.

Module 1

I jumped right into the first module today. The content is interesting, and simple enough.

First and foremost: the UX is excellent. A layout that is simple and clean, with legible black text on a white background is always a treat for tired eyes. Infographics are provided for each section of the module. A well-recorded and equalised spoken soundtrack in which LeGardon expands on the subjects covered accompanies the written text. Finally, the entire course is available to download as a PDF. Well done – kudos!

The takeaway from today’s material:

Artist’s Rights vs Copyright

Artists’ Rights (Derechos de Autor), as they are known in Europe, are fundamentally different from Copyright, the format used in most Anglo-Saxon countries, including my native Canada. Artists’ Rights include “Moral Rights” to a work, something that copyright does not.

The copyright © sign

LeGardon says that using the copyright sign “seals” a creator’s enactment of their rights. But, also, not using it DOES NOT imply that they are relinquishing their rights. So, basically, if you created it, it’s yours.

Ideas vs. works

IP is not about ideas. Rather, it is about realised works. Having said that, a playwright does not have to stage a play. A manuscript and guide suffice. A musician does not have to score a work, a simple demo recording is enough.

A number of useful links were provided. One of the most interesting is “WIPO-PROOF” which defines itself as “an online service that rapidly produces tamper-proof evidence which you can use to prove that your digital file existed at a specific point in time.” As I delve into UX, I think that it is useful for me to keep IP front and centre. All creatives are eventually faced with the same sad truth. That is, our work requires investment, time and original ideas, but it is far too easy to mis-appropriate. I will never forget the time I shared an advertisement for a Yoga Festival in Alicante only to have my friend Suki Zöe, who lives in Bali, exclaim “that’s my photo“!

As the course lasts a maximum of four weeks, I will get through it at a sprightly pace and keep you posted. Meanwhile, ask yourself if you would register your IP, or perhaps better to ask “should I”?

Atkinson Hyperlegible Font

The Atkinson Hyperlegible font is free, accessible and award-winning. I came across it during my UX studies.

The Coursera/Google Foundations of UX Design course is super interesting. It truly makes the learner look at design and technology from a different perspective.

On a recent assignment, we shared an example of accessible design. I identified a snippet about a post that I had seen on Facebook. Bo Forbes is a yoga teacher whom I follow. She announced a new Masterclass and included alt-text on her post. Given that Bo Forbes teaches trauma-informed yoga that is meant to be accessible to all, this is highly appropriate.

Another student posted a very interesting link in the discussion forum. Atkinson Hyperlegible Font “…focuses on letterform distinction to increase character recognition, ultimately improving readability”. The font is duly downloaded and shall be installed on this server as soon as time permits.

I tried to find Atkinson Hyperlegible in Google Fonts, but it is not there. This is an oversight, considering that “..the project was honored with the Fast Company Innovation Award in 2020.”,

Well, back to studying!

A white text on red background logo which says "sing sing sing" and RVIR

u-he Diva software synth on sale

That’s the reddit post I found, and here is the link itself: https://www.native-instruments.com/en/specials/komplete/u-he-offer-2020/diva-pricing/

I had been trialling the DIVA synth since I read about on another Reddit thread. The demo version has all the sounds, but it gives some random crackle every now and then.

With the Arturia MiniLAB already onboard, and the Ableton native sounds, the bass sounds I wanted were still proving elusive. For my yoga and meditation music, I want warm, organic, non-intrusive sounds.

The native Ableton stuff is all way to techno for what I am after. Arturia has some great sounds, but my CPU maxes out if I put more than one Arturia VST on a track. So, I was getting stuck.

Always thinking of the yogi trying to chill the heck out, I decided to invest in the Diva.. Music production for yoga had to be very sensitive as you must understand the relaxation process in itself, how the brain calms down, how the breathing rate slows, how the heart beat becomes less variable, and compose accordingly.

Anyway, I am super happy to have the Diva on board now. Back to the DAW. Bye!

Rachel

freeCodeCamp Assignment #5: Personal Portfolio Page

Hey guys. So, I told you last night that I was blasting though the FCC assignments. Well, I am proud to announce that I have just finished the last assignment for the Responsive Web Design Certification, create a Personal Portfolio Page. Here is a screenshot:

I used a “rose gold” background because I am really digging those colours at the moment. I like the way the linear gradient draws your eye to the centre of the page, and is bright without being blaring. The challenges were relatively easy – a sticky navigation menu, a responsive grid – but I gave it my best shot and added some design elements that we had covered in the curriculum. Namely, I used the drop-shadow effect on my tiles and aligned the tiles horizontally.

The sensation is one near to elation – how nearly had I forgotten how much I love to tell a computer what to do! Looking forward to starting the JavaScript course is putting it vey mildly. Check in and watch me grow my skills. I still have some strings to my bow….Peace out.

freeCodeCamp Assignment #4: Technical Documentation

This assignment is a technical documentation project. I chose to write a recipe for Spanish tortilla.

The Internet is full of how-to’s, isn’t it? Most of us self-taught techies learned very early on that the best source of information about the Internet and its inner workings is the ‘net itself.

The latest challenge in the freeCodeCamp curriculum is the creation of a Technical Documentation Page. Here is a screenshot of mine, proudly served on Codepen. The image is clickable, but you probably need a Codepen login to see it there.

As you can see, I decided to write a technical document about how to make a Spanish tortilla, or an onion and potato omelette. I love a slice of tortilla, but admit that I am a bit rubbish at the turn. Thankfully, any Spanish bar has tortilla on offer, so I don’t have to prepare it at home!

I worked quickly by using the same method that I mentioned before: working sequentially through the challenges and running the test script after every change. I wonder if this might use more resources on whichever server hosts the script. But, it’s pretty light, in the grand scheme of things.

The trickiest thing about this assignment was coding the floating menu that appears on the top left corner. It has to be always visible, no matter what screen size and where on the page the user is scrolling. It took a couple of attempts, but I got there.

Tomorrow, the last assignment and the onto another course, this one in the world of finance, “Factura Digital”. Whoop whoop!

freeCodeCamp Assignment #3 – Product Landing Page

Hey guys. As I told you earlier, I am charging along through the first part of the freeCodeCamp training. It is quite easy for me so far as I have some knowledge of HTML and CSS. Still, having to conform to a set of rules rather than code to my heart’s delight is more stringent and challenging.

Here is a screenshot of the landing page that I coded today:

Click on the image to see it in Codepen.io

As you see, I recycled design elements from pages that I already have published online. It strikes me that this course would be far more challenging for a complete beginner. First of all, what kind of “Product Page” would you invent if you didn’t already have a product to promote? And secondly, if you didn’t have design elements (logo, videos), then it would be much more time-consuming to code the page.

Thankfully, I could whack in a video from my YouTube channel, Alteayoga. And, the logo I used is from my Rose Tint Your Life project.

This time, I did the code-and-check method that worked so well last time. Let me tell you, it keeps you much more focused and you catch errors much more quickly. I finished this assignment in just over three hours, with a couple of short breaks. Notably, I had none of the head-scratching and frustration that I had in Assignment #2. So, if you are reading this because you’re learning to code, please check your code after every change. It only takes a second.

The only thing that I need to go back and check is the alignment of the sections at the bottom. Specifically, I wanted the “Massage” “Yoga” “Meditation” and “Sound Healing” boxes to be aligned horizontally. The actual design was meant to be a bit like the RTYL homepage. But, despite using the CSS flex property, I still have a vertical list. The page passed the script test, so I handed it in. I need to keep moving. But, my meticulous mind will have me back at the code to straighten things out, just you wait and see!

This is the code that I need to fix:

massages {

display: flex;
flex-direction: row;
margin-left: 10%;
border-style: double;
width: 60%;
height: 250px;
}

yoga {

display: flex;
flex-direction: row;
margin-left: 10%;
border-style: double;
width: 60%;
height: 250px;
}

meditation {

display: flex;
flex-direction: row;
margin-left: 10%;
border-style: double;
width: 60%;
height: 250px;
}

soundhealing {

display: flex;
flex-direction: row;
margin-left: 10%;
border-style: double;
width: 60%;
height: 250px;
}