User Experience Design – The importance of wireframe

by Esmund Koh.

Do you remember what websites used to look like? I do, plain boring tables and a link dump for your navigation needs.

tI9Ww

Src : http://i.stack.imgur.com/tI9Ww.jpg

As technology evolves, complex design became possible and the industry looked towards providing pleasing user interfaces to attract customers. Nowadays when we surf the web, we are greeted by a visually pleasing layout with organised and intuitive navigation. Moving beyond simply providing attractive visual design, there is a greater emphasis in user interaction and experience. The term user experience design (UXD) is used to define this design field.

So, how does designer build great user experience designs?

One critical step of the design process is the wireframe.

Wireframe is a pivotal component of the design process. It serves as a visual framework that depicts the general layout of a webpage allowing designers to brainstorm and experiment concepts for the page.

wireframe-example-large-1

Src: http://blog.skipper18.com/wp-content/uploads/2014/01/wireframe-example-large-1.png

An example of wireframe of Facebook’s timeline page.

Wireframe can range from being a rough sketch or low fidelity to realistic or high fidelity

Low-vs-High-Fidelity-UX-RossPW

Src : http://rosspw.com/wp-content/uploads/2012/11/Low-vs-High-Fidelity-UX-RossPW.jpg

As shown above, low fidelity wireframes are more abstract and contain only the basic layout of elements in a page. This is preferred during brain storming or experimenting before a design is finalised. High fidelity wireframes, on the other hand, is a representative of the actual webpage with detailed content and styling.

This begs the question, how much detail should be included?

It depends.

When designing a webpage, it is often the case where requirement or plans change over time- resulting in frequent edits to the web design. Therefore, a rule of thumb by designers is to build a concrete concept and slowly build from it. However keep in mind that there is no “right” way as different teams and project may affect the design process depending on the complexity or time constrains.

UX-Fidelity-Design-Chart

Src : http://rosspw.com/wp-content/uploads/2012/11/UX-Fidelity-Design-Chart.jpg

A guideline to follow when balancing fidelity and concept.

A website or application usually contents multiple pages or screen layout. Multiple wireframes are often placed together to represent how the website will flow.

wireframes-2

Src : http://heroesandguises.com/blog/wp-content/uploads/2013/11/wireframes-2.jpg

This example shows how different wireframes are integrated to form a cohesive navigation experience for the final product.

Wireframes can also be used in usability testing before the concept is developed further. This can save the agony; not to mention time and resources, of developing a potentially bad designed wireframe into a full-fledged website before realising.

As mentioned in this week’s lecture on usability testing, there are certain experimental biases skew the test results.

bi_graphics_20-cognitive-biases-that-screw-up-your-decisions

Src : https://static-ssl.businessinsider.com/image/55ddd6f7bd86ef1e008b6051-1200-2247/bi_graphics_20-cognitive-biases-that-screw-up-your-decisions.png

Some of the biases we must take note of when making decision, including deciding the choices of changes to design based on user feedback.

As the saying goes “Well begun is half done”, building a great user experience begins with a solid design.

Reference :

http://heroesandguises.com/blog/2013/11/12/an-insight-into-wireframing-heroes-and-guises/

http://rosspw.com/the-design-process-and-artifact-fidelity/

https://www.usertesting.com/blog/2012/10/23/wireframing-tools-and-testing/

http://www.businessinsider.sg/cognitive-biases-that-affect-decisions-2015-8

Featured

AY1516 Semester 1

This blog serves as a writing platform for current CS2024 students (if you’ve been unceremoniously kicked off, I apologize). I’ll be reading through anything posted up here and keeping track of interactions; online interaction on this blog will contribute to your Attendance and Participation grade. Welcome to the new semester.

Importance of Fold(ing)

Importance of Fold(ing)

I should have brought this up a lot sooner, but since you’ve still got a while left before you’re done with your projects, here it goes:

When designing your pages, Laubheimer (https://www.newfangled.com/using-the-fold-ux-asset/) points out that it’s always important to be mindful of what goes into the “fold” of your web page. That is to say, it’s important to know what occupies your users’ screens when they first load your web page.

Laubheimer points out several resources that you can draw on when explaining how important keeping content in the fold is (tl;dr: Important, but not that important), and what should and should not go into the fold. If in doubt, always return to NN’s 10 Usability Heuristics that were brought up in the Dark Design Patterns e-learning session.

 

Course Content Page

I’ve put up a new “Course Content” page that will carry each week’s readings, in lieu of posting on NTU Learn (for accessibility reasons). You are, in the spirit of how this course is run, encouraged to propose course material that you think would add value to the course. Material that is unmarked (i.e. there are no extraneous comments added on other than reference information) should be considered course material and potential exam fodder. Content that I specifically mark as non-examinable should be considered as such.

RE: Pitch submission next week

RE: Pitch submission next week

Hi guys,

You have your pitch submission coming up next week. I know I said in lecture that you’d have to submit the pitches on Monday, but I realised that I’ve stated in the syllabus that the submission should be due at the end of the week.

As such, you guys should be submitting a digital document that contains your pitch at the end of week 4 (i.e. 6th February 11:59pm) to me via email (check syllabus for it). Submissions that don’t reach me by then are considered non-submissions.

Requirements for this assignment are laid out in Appendix C of the syllabus (as are the requirements for all other assessed components in this course.)

Any questions regarding the pitch submission should be directed to me (Zed).

Also, do remember to update your groups (here: http://bit.ly/1ITAWQA) and pick your post topics (here: http://bit.ly/1ywZ0UX).

Ian Bogost on The Design of Fun

This is Ian Bogost who writes extensively on videogames and — more importantly — on the nature of videogames. Watch the video above and you’ll get the sense of how this is related to our upcoming lecture on UX design.

I’ve taken the liberty to transcribe what he says in the video and have included the transcription below. Of course, it would be more fun to listen to him tell you his thesis than just read it.

These days it seems like we want to have fun all the time. Everyone has a plan for making work fun, learning fun, making laundry fun. It’s become so common and so cloying it’s almost enough to make you want to make you swear off fun forever. Games are perhaps the only medium daft enough to measure their aesthetic value with a nebulous concept like this — like fun — and as a result, games tend to be seen as a form of black magic: you know that they have a power over people but you can’t quite characterize that power, which makes us desperate to control it.

You know, educators are wondering: “What’re my students doing inMinecraft™ all day?” And parents wonder, “Why can my kid lead a World of Warcraft™ guild but can’t finish his homework?” And all of us wonder why [we are] so addicted to Candy Crush™. And we tend to think that games are this powerful becaues they deliver this payload of FUN. We think we want to have fun everywhere. But what does it mean to make something fun? Do we even know what it means?

If we want to design a fun toaster, or a fun tasting menu, or a fun conference talk, how would you go about it? [A slide displaying a tag cloud of words, with the word “gamification” highlighted in orange, while “game,” “experience,” and “design,” also feature prominently.] We’ve mis-understood fun to mean something like “enjoyment without effort”. And that’s why every activity now has someone trying to “gamify” it (as the consultants keep saying), to make it fun — to turn it into a delightful morsel of sugar in your mouth.

And in fact it’s with that “morsel of sugar” that many of us first learn about how games supposedly make games fun thanks to that great philosopher of fun Mary Poppins. So if you remember how that mystical Vicatorian nanny assures the Banks’ children; she says, “A spoonful of sugar helps the medicine go down.”

This song rehearses our understanding of fun as enjoyment as opposed to misery. Essentially, what Mary Poppins is suggesting is covering over drudgery, just as the robins’ songs supposedly hide the boredom of nestbuilding (or something in the Poppins’ song hides the boredom of cleanup). But, actually, “a spoonful of sugar” tells us so little. It’s kind of embarassing we kind of let this song get away with it for so long. [Quoting Poppins] “In ev’ry job that must be done/ There is an element of fun/ You find the fun, and snap!/ The job’s a game.” (It just sounds great, right?) Just try to follow this advice, I dare you. If an element of fun is hidden in every job, then how do you find it? Where do you look? By what process does a job become a game? Do I just snap? Is that it? Do I need to hire my own supernatural nanny? “A spoonful of sugar” turns out to tell us what we already know. It’s just a tautology. “A job seems more fun if it seems more fun.” Mary Poppins is selling snake oil.

Games and fun are connected not because games are intrinsically enjoyable, but games are fun because they are experiences that we encounter through play. And play is manipulating something that doesn’t dictate all of its capacities, but it does limit many of them. So Minecraft™ asks you to survive in a world made of these inhospitable cubes that you can use as resources, and Candy Crush™ asks you to solve puzzles given a limited supply of powers. And play, it turns out, isn’t limited to games at all. It’s everywhere. It’s in anything we can operate. A mechanism like a steering wheel has some play built in: room through which the steering shaft moves to turn the pinion. Play isn’t an act of diversion, but a name for making something work — for interacting with its materials. And that it why we also say that we play an instrument, or a sport. There’s an old aphorism about golf that calls it “a good walk spoiled.” And, it’s meant as a joke for us, but it underscores something fundamental: games make no sense, and yet we take them seriously preceisely because they make no sense. The philospher Bernard Suits calls it “the voluntary attempt to overcome unnecessary obstacles.” There’s something unreasonable, something foolish about playing games. And as it happens, this is where the word “fun” actually finds its origin — in “foolishness”.

The Middle English word that would become “fun” means “a fool” or “to make a fool of.” Like you might say, “don’t poke fun at me.” And the medieval fool — the jester, or the trickster — was not reckless [beg to differ, but in this sense the jester probably inhabited a state of intense and intentional “recklessness”]. It was a honest-to-god job. Being a fool was a commitment. The fool was expected to see life differently. In fact Queen Elizabeth [which one?] was even said to have rejoined [in the Middle English sense] her fools for not being critical enough of her reign. What the fool does is ask, “What else is possible?” And then carries out [enacts] even the most outlandish answer. That takes a kind of shrewdness; it’s not a witless practice. It requires this painstaking attention to detail to find something new in a familiar situation. Not this “anything goes” carelessness that we usually think of when we think of fun. In fact the fool teaches us that fun requires a greater commitment to everyday life. Not — not a lesser one at all. And “fun” isn’t a “feeling,” it turns out. It doesn’t involve making somethig easier by rewarding it with points, as if life is some blatant version of space invaders. Instead, fun means deliberately manipulating a familiar situation in a new way. We can only have fun once we’ve accepted the truth of that situation — treated it for what it is. Golf isn’t a good walk spoiled; it’s a way to transform landscapes into a centuries-long hobby. And like golf, the things that we tend to find the most fun are not easy and sweet like the Banks’ cleanup routine. I mean, manual transmissions and knitting are fun because they make driving and fashion hard, rather than easy. They expose the materials of vehicles and fabrics and they do not apologize for doing so. There’s a kind of terror in real fun — the terror of facing a world as it really is, rather than covering it up (it shouldn’t). And this is where Mary Poppins leads us astray: “a spoonful of sugar,” it hides something, it turns it into a lie. It assumes that the subject of our attention can never be sufficient on its own. When you think about it, a job is made fun by not turning it into a game, but bydeeply and deliberately pursuing it as a job.

Jobs are fun when their work is meaningful, when their activities matter the act of conducting them can be done over and over again with increased adeptness. So fun can’t be added to something no more than chocolate turns brocolli to dessert, but you can design and use things with enough resistance to allow this capacity for play. And every now and then they reward you for doing so.

In 2010, at Wimbeldon 2010, for example. John Isner and Nicolas Mahut played a match of tennis for three days. Neither one was able to break the other’s service to tip the match out of equilibrium, and both of the players served over a hundred aces. Isner finally bested Mahut with a 70–68 final set (it was so ridiculous). They found something in tennis — the two of them — that nobody had found before, as if they were unearthing a fossil. Two well-matched players could make tennis go on almost forever. They coaxed the sport to give up its secret because they treated it with such absurd respect that the game couldn’t help but release it. And this is what fun looks like at its best. You don’t need to be a tennis pro to access it.

Anyone can play anything with the deliberateness that produces fun. For example, each morning you grind your expresso beans, and you unclump and tamp them to the right weight and density which you’ve discovered over many other mornings, and then you time temperature-regulated hot water through the group-head to produce this 27-second pull that you’ve timed and it balances sour-ness and bitterness in a particular roast you’ve chosen, but then next week you choose a new grind or a new tamp to work with a new blend. On Tuesdays you go out with your friends. And even with the same company at the same bar, with the same hot wings, the same complaints about the same co-workers, each evening results in some new discovery: in the way a sense-of-humour responds to a particular story; the way a face blankets worry with a familiar gentleness. On Sunday you mow the law, and you use a manual reel mower to reduce noise, to connect yourself physically to the act of mowing. But the blades catch short on your uneven plot, and so over many Sundays you discover the momentum to keep pace between the switchbacks. While struggling to maintain that control, you refine the straightness of your stripes over the months, over the seasons.

Fun comes from the attention and care you bring to something that offers enough freedom of movement, enough play, that such attention matters. And even seemingly stupid, boring activities can be fun as a process (maybe especially stupd and boring activities can be). Feeling that you are having fun at something is a sign that you’ve given it respect. When we fail to have fun, we fail to design for it too because we don’t take things seriously enough. Not because we take them too seriously.Minecraft™ is fun because it is not trying to be anything but Minecraft™. It’s not trying to be Minecraft™ for physics education, or Minecraft™ for laundry [or lingerie?]. But imagine if physics and laundry took their practices as seriously as Minecraft™ takes Minecrafting. Imagine if all the people trying to add fun to their products and services redoubled their commitment to the experience of using them instead. And that’s how you design fun — by treating the thing you’re doing or making as exactly what it is. Fun isn’t a kind of pleasure (at least not a kind of direct pleasure).

Fun is giving respect to something that doesn’t deserve it — becoming infatuated with something for which infatuation seems impossible [the idea of excess]. Just by working it carefully and deliberately over time in the hopes that it will someday blush before you, and reveal its secrets.1

  1. Ian Bogost in “WIRED by Design: A Game Designer Explains the Counterintuitive Secret to Fun,” YouTube video, 10:42, published by “WIRED,” 5 Dec 2014, accessed 24 Jan 2014. https://www.youtube.com/watch?v=78rPt0RsosQ . Comments in “[” brackets and emphasis mine.

BITCOIN and On Posting Here

Since you guys are still (presumably) stewing over what article to write and how to take on the posting assignment, I’ll post one up as a primer to how it should look like and how this entire thing works1.

What is Bitcoin?

Bitcoin is a Crypto-currency, which depends on the Bitcoin protocol that regulates how it is transferred and generated across a network of computers. Being a crypto-currency means that it is virtual money that depends on an encryption algorithm for its transactional value2. The problem that it tries to solve is that of the centralized authority on which most currencies on the FOREX depend on for their value. Bitcoin advocates say that it is the only currency in the world that is without a central controlling authority, since it depends on a peer-to-peer3 network of computers to not only generate but to validate its value and transactions. Picture it something like this:

In a humongous room, there’s an endless jigsaw puzzle being put together. Everybody in the room is sifting through a pile of jigsaw pieces in the center of the room. These people will each pick up a piece of the jigsaw and try to fit it into the puzzle. Each time someone finds a puzzle piece that fits, a picture is taken of the whole jigsaw puzzle thus far, and is given to the person who finds the piece as a unit of currency, a Bitpuzzle (for example). The value of the Bitpuzzle is determined by supply and demand, i.e. the amount in “real” money someone is willing and able to pay for a Bitpuzzle pitted against how many are available for trade. Every Bitpuzzle is also tracked by a radio chip so that no duplicates can be created, and every expenditure is tracked by a central record that the Bitpuzzle has to be returned to in every transaction so it cannot be double-spent. As more Bitpuzzles are created (by finding fitting puzzle pieces), its value may initially deflate quickly. But its deflation is arrested because it gets harder and harder to find fitting puzzle pieces and so the creation of new Bitpuzzles slows down and stabilizes after a period. Everybody is able to verify that the Bitpuzzle that they own is a valid Bitpuzzle by comparing it to the existing jigsaw puzzle that everybody is adding to.4

That’s basically how Bitcoins and the Bitcoin protocol works, just that the Bitcoin protocol is what regulates this process of generating block-chains5and recording transactions across the entire peer-to-peer network on which it is run.

While the protocol has a solid crypotographic algorithm that is completely open and (because of its open-format) is very secure6, it is still open to what the official Bitcoin FAQ calls “user error”. This means that while the Bitcoin protocol and encryption itself is secure, you are still not safe from your Bitcoin wallet or the exchange itself being hacked, or being robbed at knife-point at a Bitcoin ATM. While being heralded as a mile-stone in digital security practices, it still has its flaws.

The most important thing to come out of the creation of the Bitcoin, hence, it’s not that it can potentially create a true crypto-currency, but that it has huge potential applications outside of virtual currencies7.

  1. Just so you know (and someone was eventually going to ask this), the specific workings of the Bitcoin is not tested as it is not within the scope of this course.
  2. https://bitcoin.org/en/faq#who-created-bitcoin
  3. http://en.wikipedia.org/wiki/Peer-to-peer
  4. Disclaimer: This is a highly reduced account of how Bitcoin works. I take no responsibility for any of your Bitcoin mishaps based on this article.
  5. https://bitcoin.org/en/faq#how-does-bitcoin-work
  6. https://bitcoin.org/en/faq#security and https://bitcoin.org/en/faq#why-do-i-have-to-wait-10-minutes
  7. http://www.wired.com/2014/03/decentralized-applications-built-bitcoin-great-except-whos-responsible-outcomes/

Week 2

Hi guys,

Putting up a few important links before class starts:

The course syllabus is available via NTULearn, and contains important information regarding your course assessment.

Start thinking about the Web Project that you will need to submit a pitch document for on Week 4 (it’s not too far away).

[edit: 19 Jan 0748]

As a primer for the sort of issues that we will be dealing with as the semester progresses, you can also take a look at the links below on the “Right to be Forgotten”:

http://www.theguardian.com/technology/2014/nov/11/right-to-be-forgotten-more-questions-than-answers-google

http://www.theguardian.com/technology/2014/oct/21/right-to-be-forgotten-who-may-exercise-power-information