blog.callum.digital

Milewski, B. (2017, December). The British School of User Interface. Retrieved from Reliable Software: https://web.archive.org/web/20171226152845/relisoft.com/Science/ui/index.htm

University of California Research. (2016). How to design doors to be less confusing. Retrieved from University of California Research: https://ucresearch.tumblr.com/post/140750207994/how-to-design-doors-to-be-less-confusing-youve

(1) Given this image was taken at an event in North Korea, I feel it speaks to a culture of uniformity expected within the republic. Everyone must conform to what’s expected in terms of dress code, hair styles, job-norms... It also speaks to the propaganda spread by the country in regards to their wealth stature - The country likes to perceive itself and wealthy and plentiful however in reality, if you’re not living in the capital, Pyongyang, you’re working in the smaller districts in labour jobs (Life in Pyongyang is generally by invitation only so if you’re not asked to live there, you may not do so). The image shows a large crowd of people holding coloured paper while a group marches ahead of them in some sort of performance which is most likely in celebration of the current leader and those leaders who have passed.

(2) Architecture is apparent in this image as the design of the complex where this is taken would have had to take into account the number of people who can sit in and also perform at any given time. Paper is used to display the image of the gun. Fashion design (Might be used very loosely) to design the uniforms the performers are wearing. Propaganda is most likely at the fore front of this image.

(1) These images are twined with a sense of irony. These are both taken from the same event, in the same city on the same day, in different suburbs. On one hand, the first image shows a crowd of African American’s standing on the edge of a street and in the other we see a crowd of white people doing the same. The ironic parts of this image are in the stereotypes; typically, from popularised media, people of colour are often seen as being inferior, violent, ignorant, rebellious and untidy (Punyanunut-Carter, 2008) however in the top image, the crowd is waiting patiently on a tidy sidewalk with no scenes of commotion and they remain on public grounds. If we turn to the bottom image, the crowd of white people, typically perceived as smart, well cultured, affluent and tidy, are standing on a sidewalk littered with rubbish, people are standing in a property which is presumably private just to get a better vantage point. This speaks to an interesting point regarding equality and segregation and the fact that while we’ve come a long way, there’s still underlying 

(2) Manufacturing - Paraphenalia created for the Mardi Gras (beads, boa feathers); Photography; Cellphones (Man in forefront of top image appears to be using a phone); Power distribution; Language (communication through conversation with others) 

(3) Photography; Juxtapositioning

---------

1.Body: Name an IoT product you might design, its purpose, what its connection to IoT represents  

Smart Mask; with masks becoming more and more popularised with the uprise of COVID, the smart mask would use geographic location as well as sensors to tell indicate if it’s a good time to put the mask on if you’re in a crowded location where social distancing might not be possible, or if there is high levels of pollution in the area which may mean it’s more beneficial to wear a mask out and about. It would be connected to a network so if your mask detects anything, it will feed this back to other users nearby. This means you’ll never have to wonder when and where you should put your mask on.

2. Smart Home: Name an IoT product you might design, its purpose, what its connection to IoT represents

Smart Tap; Attaches to water faucet and alerts when levels of chlorine or fluoride in water is at dangerous levels or if the water quality is low indicating if the water needs to be boiled before drinking. 

3. Smart City: Name an example of IoT used in the public realm, its purpose and what its connection to IoT represents

I’ve decided this semester to try out a new platform for documenting and managing my project - Notion. This replaces pretty much most tools I’m already using with the exception of Figma for prototyping. It lets me create different spaces to collate research, write posts and also create roadmaps to help manage where I am in the project so watch this space.

This is a quick one...

While thinking on my project and the fact I want to focus on wayfinding around the uni, I’ve been trying to think of other ways to achieve this rather than through an app, website or by signage...

And just like that, after 8 weeks we’re back into full swing. The start of the semester was actually last week but this is my first blog post for the year.

This semester I’m working with Fox and Lachlan in a working group - We’re all somewhat interested in UX/UI design but want to explore and work on our own projects while using each other to bounce ideas off one another.

The past week has been spent gaining a basic understanding of UX/UI design at it’s core as well as setting out our framework for how we’re going to work. I’ve set up an Asana board for us to use and put up our work/ideas/project requirements as well as this we’re using the pinboard provided with the desk space to put up a weekly schedule as well as a place for ideas and a grid where Lachlan and Fox have mapped out apps/website they believe have good/bad UX/UI.

For me I’ve mostly been looking at what UX is initially, trying to figure out where my current understanding is and also avenues I want to take in terms of formulating a project.

I was recommend a book to read by an ex-alumni, Walt, called The Elements of User Experience by Jesse James Garrett. While it focuses mostly on UX within a web design context, it has highlighted a few key concepts. One of which being that User Experience isn’t just focusing on what the product does for the user, but also how it works - This part if more important I feel as if the product doesn’t work efficiently, it won’t work for the user as intended and as a result will create distrust between you as the creator/brand and the person buying into your product. This is why human-centric design is so important, it looks at how the user will use the product at each step and instead of making compromises for the sake of needing to, it focuses on how that will impact the user and makes it a purposeful rather than accidental compromise (Garrett, 2003).

After this, I decided I wanted to look into UX at it’s real core and go back to basics - The easiest example of human-centric UX design is the Norman Door. It uses visual cues to help users know whether they need to push or pull the door, or twist the knob to open it. It’s achieved by using a handle on one side, then a flat panel of some sort on the other. This removes the need to have a physical sign that tells the user what to do. 

Now that I have this basic understanding I started think about where I could go and what I could do. I discussed the idea of a tool to help with anger management where users input their thoughts and how they’re feeling and it outputs if they’re feeling positive/negative and also pulls they key parts from their input and tells them what they’re feeling more strongly about - Kind of redundant since Grammarly already does this. I also thought about a tool for “know-it-alls” that, regardless of whether the answer is right or wrong, will always tell the user it’s wrong - I had no purpose for this though. 

I then started thinking about other applications; one issue I identified was when waving down a bus, sometimes they don’t react quick enough and drive straight past, or when there’s a line of buses at 1 stop, it’s hard to wave down one passing - So making something to help signal to drivers before they reach the stop whether this is through an implementation into the AT app, or a button at the bus stop that activates a flashing light or something.

And then I thought about other things that interest me - I remembered I was thinking about looking into Wayfinding a few months ago but ended up in different avenues. Wayfinding is something I’ve always had a weird affinity for wayfinding and how to visually represent a way to navigate somewhere and how it can be made more efficient. Hospitals and Malls usually do this pretty well by labelling car parks with numbers and colour-code them for people to remember. Hospitals also employ a physical guideline, usually marked in red to help people easily find the ER/exits. I’ve noticed a lot that navigating through the Uni campus can be quite difficult, especially if you’re trying to get to somewhere you’ve never been before so with this I’ve decided I want to look at creating a way for Uni staff/students to easily navigate themselves and more efficiently whether this is through an app, through physical cues like guidelines on the group/posters or through some sort of website.

A lot to look through and a lot to research but I’m looking forward to kicking this off.

-------------

So this week we had our first portion of the assessment which was our crit presentations. We spent most of the week working on this as we were all pretty busy with work and all during our free times.

We collated everything we had done thus far into a powerpoint presentation and were paired with a guy from a year 3 group - Michael.

We spoke about where we were in the beginning and where we are now going through each of our concept development processes and showing our working examples and how we’ve tested them.

Michael gave us some really great feedback on the back of this. We discussed that at this stage we’re almost trying to force the experience on the user, whereas we should be looking at just creating an experience in which users can interpret themselves - This applies more to the abstract concepts.

We also talked about the other concepts and were looking at familiarily - So taking a familiar sound or image and then literally f**king the s**t out of it - as it was put.

From this, we kind of gauged that what we’ve been doing isn’t so much of trying to change how someone is feeling, but actually making them confused - something that could work to our advantage in the creation of project.

At this point, we went away from the crit and discussed where to from here...

Matt came up with an idea which turned everything into a game - Playing a sound thats super distorted and messed up and then having to try and get the sound to “resolve.” We all really liked this idea so we quickly came up with a processing sketch that would incorporate this idea so we could do some testing from it. The sketch maps keys 1 through 4, with each key activating/deactivating a different sound. The user then has to use the buttons to find the right combination to make the sound "pleasant.”

Off the back of this, we discussed how we could play into the idea of confusion and also put in elements of a shared experience. We discussed having the user subject to a time-delay when pressing buttons, so they don’t immediately hear the change - and to male this shared we then looked at having an observer who has no time-delay to try and invoke a confusion from them to the user about what they’re doing. We then also made our next refined brief (yeah we went through a lot of them):

To make people mindful that things/tasks aren’t always as easy as they appear

So majority of week 5 I have been sick... so that’s been great.

The time I did manage to come in though we got a working a java model of my abstract image/sound idea with the help of Stefan. It used the mouse Y axis to manipulate the shape and eventually we’ll encorporate the X axis to work with the sound.

The idea for this is that we’d use a kinect and have the use move in a space to affect the image and sound.

I thought we could maybe do this through projection mapping by having the image mapped onto a cube that is tilted on a corner so it sits suspended in a diamond formation. The user would then have to get into an uncomfortable position to in order to make the sound be “good” which in itself would be a juxtaposition.

So after our idea from last week was crushed, Callan, Matt and I decided that we were going in a different direction to Lachlan, Fox and Alyssa and this decided it was best to split off into our own smaller group.

We sat down and started to think about a new idea we could pursue - Our most recent brief was:

To create an interactive & immersive installation that incorporates elements of nature

We decided none of us really resonated with the idea of making something based off nature - Especially since Matt and Callan had both done a project last semester around plants and music. Something that we all were interested in though was sensory juxtapositioning which is the idea of having an image displaying one emotion, and a sound with an opposing emotion (e.g. happy image, angry sound). This can create some interesting combinations which we are all pretty excited to explore.

And thus our new brief is born:

To challenge our perception of normal via sensory juxtaposition

Callan decided to explore some more traditional examples following the lines of conditioning. One example is that video of the car driving down the road side with this melancholic music playing, only for a zombie to jump out accompanied by a loud scream.

Matt looked into reverse foleys and placing them over various movie scenes - this would be where you’d have a video of someone walking on sand over-layed with the sound of glass crunching. 

I decided I wanted to look at more abstract ways of achieving this. Using free flowing colours and shapes accompanied by a sound that would be deemed as “good” or “bad” - Good being calm and serene, bad being more chaotic and harder to listen to. I have a good knowledge of how to create these shapes in illustrator using what’s called a mesh gradient - which basically overlays a shape with a grid and then each point can be pulled and moved with a different colour.

The benefit of doing this in illustrator is that I can export them as SVG files and have lossless quality as it would be vectorised. This means I can then put the image into after effects and use warp effects to make it move and flow.

I made 2 versions of these abstract examples:

I had Matt make the sounds for these as they were re-usable for Callan’s testing as well. The first example features more smoother, and liquid like shapes with the “bad” sound that was modulated to give it a more piercing sound. I used a pastel colour pallet as brighter colours usually provoke happier/upbeat feelings compared to darker ones.. The second video I made to have a sharper contrast in the shapes formed, with jagged peaks and movements with the sound sound more calm.

I assumed before testing that people would find the first video more mysterious and eerie, and the second video calm and entrancing.

These past 2 weeks have been pretty full on. We started out week 2 by looking into what our premise would be and how we’d further implement our idea.

Since we had been looking at creating a tree - We discussed biomimicry and the principles we’d need to focus on to get it right. There were 3 main principles - Nature as a model (Physical looks/aesthetics. Emulating natures models in design), Nature as a measure (What works and is appropriate in the ecosystem) and Nature as a mentor (Taking the learnings from nature to apply them to the design - e.g. what works, what doesn’t) (McGregor, 2013).

From this we came up with our first brief/statement of intent:

To explore biomimicry to create an interactive installation

This is where the use of the tree and mirrors would come into play. From here we split off into 2 groups. Lachlan, Alyssa and Fox focused on the tree aspects while myself, Callan and Matt began looking into the premise of the mirrors and how viable it’d be.

We started by going down to look sharp to find small mirrors which we could construct a small box from. We also bought some wire-fairy lights to go inside so we could get an idea on how it would look.

To make this prototype we used cardboard to make a frame and then stuck the mirrors directly to the cardboard using the included adhesive pads

Once together, we put the lights in a random formation and used our phone cameras to get an idea of what it looked like inside.

We were pretty happy with how this came out, but our only concern was what it would be like on a larger scale. We debated if we wanted to do a full walk in box or if we would rather have a box where the use sticks their head in and looks around. To do the former, the box would have to be big enough for someone to stand in and turn around without knocking anything, and for the latter we’d need to work out the optimal distance between the persons head and the mirrors to determine what they’d see.

Our next step though was to find alternate ways of making the mirrors - as the ones from Look Sharp were $5 each, and traditional mirrors from places like the warehouse/K Mart were far too expensive. We looked into using perspex or acrylic. We could use this in 1 of 3 ways - Either buy it with a mirror finish already applied, buy it clear and us a film or spray paint it using a mirror finish paint. We tested the latter since it was the easiest to source and bought some spray paint which we believed would give a mirror-like finish and headed to the 3D Labs

After 2-3 coats, we checked it and it was just a silver finish, no gloss finish like we’d had hoped for which was disappointing, which meant this was going to be an expensive project.

We carried on though and tried to think of ways we could make the box smaller and how it would be used. I came up with the idea of doing the overhead box and having it be an electronic eco-system that would be used by multiple users. 1 user would be inside the box watching the changes and having no influence over them, and other users on the outside would be manipulating certain touchpoints, such as a clock arm to change the time of day, microphone which changes wind speed, a water sensor and spray bottle which makes it rain or a river flow etc.

So from this we started to measure how big our box would need to be. We estimated we’d want it to be around 800mil x 800mil x 800mil, which would be big enough to put your head inside to and started making some calls about pricing and to get some advice - It was going to cost roughly $300 for a 2440x1220 sheet of mirrored acrylic which we would then need to have cut to size. This was outside our budget range by far as we’d still need to buy components to go inside such as the lighting/screens.

Feeling pretty defeated from this we decided to have a think over the weekend about what we really want to achieve with the project.

References;

We’re back into the swing of things for the semester - Having started in our new streams in which I chose Image Space and Sound. I thought this would have been a good stream to go in as I feel it would allow me to explore more than just digital visual communication but also look into how sound can be included as well as the space surrounding.

I overheard a conversation Fox and Lachlan were having about making a fibre optic tree, similar to that of the tree in Avatar... You know, the one where Jake and Neytiri connect their weird hair things together and...... yeah...

This idea caught my attention mainly because I was really keen to work with fibre optics and making it interactive - But how do we make this different from all the other trees that had been made previously? We had already heard about a previous student who made a web-tree with fibres that reacted to touch so we had to find some way to make it unique, and also take learnings from the precedents about what worked and what didn’t work.

Eventually, we got Alyssa, Matt and Callan onboard which meant we had more heads that we could bounce ideas off.

I have friends that had been over to Japan recently and they visited teamLabs which basically houses a large series of immersive rooms each with a different style. A couple of the rooms use infinity mirrors to create these vast and infinite spaces within a small space, creating the illusion the room is a lot larger than it really is.

I wondered if there was a way we could do something similar but on a much smaller scale and incorporate the tree. Essentially we’d be building something to house the tree so it would have to be a reasonable size for both the tree and the user.

1. https://blog.callum.digital/post/188664888892/to-infinity-mirrors-and-beyond-week-1

2. https://blog.callum.digital/post/188665446537/biomimicry-nature-h20-just-add-water-weeks-2

3. https://blog.callum.digital/post/188665988907/a-killed-baby-causes-a-great-divide-week-4

4. https://blog.callum.digital/post/188666180622/i-was-sick-a-working-model-weeks-5-6

This is designed to be used by 2 people as a shared experience.

- 1 person to interact

- 1 person to observe

So for the look and feel of the visual elements of this project, I really wanted to incorporate pixel art. The visual interaction portion is set in a nightclub bar/dance floor. The bar would be used as an introductory screen before moving onto a dance floor where the user starts to go through the experience.

To begin with, I wanted to see what shading styles people preferred against different settings with different light levels/colours.

I grabbed pics from Google of some familiar bars in Auckland, Bar 101 & 1885, as well as a photo from a random bar with bright neon pink and green hues.

I found a tool online called Pixelator which pixelates images to give them a more pixel art style and with the ability to change the shading style between adaptive and dithered - Adaptive which boasts more blocked colours and dithered filling in the difference in shading with a checkerboard pattern.

Using these images, I made a quick survey which had 3 pages, each page with 2 images of the 2 different shading styles applied to the images above.

My findings for this were that in images that were mixed lighting - dithered was preferred. Where lighting was generally quite low users preferred adaptive shading and where the light featured many bright sources, there is usually 50/50 split.