Wireframes to Prototypes
I was glad to hear paper prototyping was referenced in this week's course content as I’ve used them extensively in the past module but more in the way of the design process rather than communicating the flow and functionalities to others. I like paper prototypes as you can focus on the I layout without being bogged down with the aesthetics. I also found it easy to swap out sections and try new layouts easily on designs where there were many components. I have yet to use them in a usability study. Looking at the visual Fidelity/Interaction Fidelity continue on the video, it looks like the paper prototypes I have been producing fall in the lower end of the spectrum for both.
Later Prototypes produced in Figma for both GDO730 and UXO740 were much higher visual fidelity, but because they utilised hotspots, they have limited (but improved over paper) interaction fidelity.
The video continued to reference more refined tools such as Proto.io and Axure (Brown, 2021), which are used for prototypes with a higher interaction fidelity. I must admit, I am beginning to find all the different design tools overwhelming. I appreciate that just like the products we are looking to design on this MA, the design tools referenced focus on specific areas and attempt to do it well. However, from a user's perspective, all these subtle distinctions make it harder to know which products to focus on learning. In week one it was Framer, Principle, Marvel, or InVison, now it's these two, and each one has a slightly different focus. I’m still recovering from the debates in breakout rooms in a webinar a few weeks ago regarding Figma vs Adobe XD, so these new tools have heaped even more uncertainty on the direction of my processes. one I am keen to look at is ProtoPie as we were able to see previous students prototypes, and one I was particularly impressed with was made using ProtoPie.
SMART GOAL
Look into ProtoPie as a Prototyping option before the final prototype begins production.
The last part referenced HTML5 and the Bootstrap Framework, which I am intimately familiar with as a Front End Developer. I can see these working well for the most part, particularly leveraging built-in components that can be tweaked with custom CSS styles to produce a prototype that matches the visuals required. It’s not something I’ve done in this course yet, but at work tweaking, existing designs in the browsers developer tools is common practice and is a very quick way to mock up a functional prototype when discussing or exploring ideas.
UI Design
The UI design patterns reminded me of Jacobs Law:
“Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know” (Yablonski n.d.)
Conventions are really important, you’re basically leveraging a shorthand that visitors to sites or apps can use. The users familiarity with a given UI design pattern means that the innovation doesn't derive from reinventing the wheel, but rather its how the pattern is used within the context of a given design.
The quote from the video from Alan Cooper reminded me of the highlighter review technique previously read about in the book, UI is Communication by Everett N McKay.
Coopers quote:
“No matter how good your interface is it would be better if there was less of it.”
(Cooper et al. 2004:41)
The technique by McKay goes as follows:
Choose a scenario
Make a printout of every page used in the scenario
Perform the scenario, highlighting everything that is potentially useful along the way.
(Optional) Repeat for other scenarios, using a different highlight color
Evaluate the results.
(McKay 2013:277)
The idea is to eliminate unnecessary elements that don’t add anything to the design and cause clutter. I’ve used it before in my own practice at work and I’ve found it useful in simplifying UI components by asking more seasoned colleagues why these elements are present. Often there are historical reasons for their inclusion and they are a legacy of redundant design choices. I haven’t yet used it during my studies, which has probably something to do with creating new designs within a restricted timeframe. However, seeing the project examples provided last week by previous students, I am aware that I will be iterating on the concepts I come up with several times before the end of the module and therefore I have an opportunity to add this technique to my practice to ensure the design is as focused as it can be.
Interaction Design (IxD)
Interaction Design is on of the main reasons I’m on this course, it's an area that continues to fascinate me ever since I read About Face - a book about interaction design by Alan Cooper (Cooper et al. 2013). The initial reason for me joining the course stemmed from wanting to supplement my Front-End Development skills with more design-related skills. Interaction design was at the top of the list as I felt it was the area most closely associated with both and could act as a bridge to UX from my current role.
Don Norman’s 6 principles
Visibility
Feedback
Constraints
Mapping
Consistency
Affordance
It fascinates me time and time again how one UX professional's principles have a sizeable overlap with others in the field. Don Norman’s Principles have significant overlap with Jakob Nielsen's 10 Usability Heuristics. It's little surprise that they have subsequently become colleagues, forming the Nielsen/Norman Group (NNG). Norman's visibility and feedback principles relate closely to Neilsens Visibility of System Heuristics and there is a near-direct parity for consistency across both. Where they slightly differ (from my understanding anyway) is that Neilsen focuses on consistency when comparing the design against an existing, external system as a user will be familiar with these conventions, whereas Norman refers to the consistency of the design with itself. In this regard, this also ties in with Nielsen's recognition rather than recall.
Challenge Activities
I have identified two tasks that are essential for my concept. Skills and finding volunteering opportunities are the two main elements. Getting these right will be key to the success of the product, so it makes sense to create two tasks for my Usability Test that focus on elements of these.
Task 1: Write Tasks for Usability Testing Brief
[~30 minutes]
Visit a website (any website) and write out two tasks you could use in a usability test.
Have a look through your wireframe sketches from Week 4, and write out two tasks you could use to test the usability of your own product. Remember, make them:
Realistic
Actionable
Not leading
I have identified two tasks that are essential for my concept. As Skills and finding volunteering opportunities are the two main elements getting these right will be key to the success of the product, so it makes sense to create tasks for my Usability Test that focus on elements of these
User Task One
Goal Users should be able to find and apply for a new opportunity in under 2 mins
Task Show me how you would search for and apply for a new volunteering opportunity
Quantitative How quickly the user reaches the success page
Qualitative How frustrated/satisfied the user was with the interaction
User Task Two
Goal Users should be able to add new skills.
Task Show me how you would add the skills of Blogging and Copywriting
Quantitative How quickly the user reaches the success page
Qualitative How frustrated/satisfied the user was with the interaction
User Task Three
Goal Users should be able to reprioritise their skills.
Task Show me how you would reprioritise two skills
Quantitative How quickly the user completes the task
Qualitative How frustrated/satisfied the user was with the interaction
User Task Four
Goal Users should be able to local and endorse another users skill in under 2 mins
Task Show me how you would endorse John Smiths' cooking Skill
Quantitative How quickly the user reaches the success page
Qualitative How frustrated/satisfied the user was with the interaction
Task 2: Create a Hotspot Prototype
Brief
[~60 minutes]
Create a three-page wireframe prototype with your design tool of choice (industry standards are Sketch, Figma, Adobe XD).
Create rough wireframes of your product. You only need to prototype the pages that will facilitate testing your tasks (from above).
As you wireframe, focus on the happy path.
Upload your pages into your prototyping tool of choice (industry standards are inVision or Marvel) and create hotspots to link them into a journey. (If your design tool is good at prototyping, of course you can use that too.)
The one area I have the ability at this stage to hotspot is adding skills (figure x), which is a fairly linear process compared to other processes such as skills deletion and skills prioritisation (which I'm trying to do with drag and drop).
Task 3: Identify Design Patterns Brief
[~30 minutes]
Identify at least three design patterns that may apply to your UX Prototype project. You do not need to design them, just identify patterns that might work for your project. (For a list of design patterns, see ‘Examples of UI Design Patterns’ in the slides for Intro to UI Design).
Explain why you chose them, and write about it in your reflective practice.
I could honestly think of almost a dozen of the Design patterns identified in this week's video that would work in my artifact, including:
Registration
Login
Sign out
Account setting
Pagination
Tabs
Expandable/collapsable content
In line editing
Modal editing
Drag and Drop
Progress indicators
A few I would really like to highlight though include:
Login and registration
After the group session with LJ and my classmate Sophie, I had great feedback for the onboarding process, which included a sign-in form at the end. One of the main features of the concept is skills - learning skills and bringing skills to volunteering opportunities. I had suggested LinkedIn integration for sharing skills later in the app but Sophie has suggested perhaps incorporating it as part of the registration process, so the user would be able to use their LinkedIn profile to register and upload their skills at the same time. I liked this idea - registration should be as frictionless as possible. I’ve been reading Better Onboarding by Krystal Higgins and one of the anecdotes in there was about her experiences working on a website where a colleague said the reason they asked users to agree to an "end users licence agreement" upfront was so they wouldn’t have to deal with it later (Higgins 2020:18). Clearly this did not sit well with the author, who is a proponent of guided interaction at the appropriate stages (Higgins 2020:15), which help the user acimatise to the app gradualy rather than frontloading everything, My onboarding process asked the user to invest too much time and effort too early on, before seeing any actual benefits themselveswhich will need addressing this will need addressing. I began to research Sophie's suggestion of incorporating the LinkedIn API and it looks like it could be a promising option (Microsoft. n.d). LinkedIn integration is starting to look like a core component of the concept.
SMART GOAL
Before next week's post I will find out if Linkedin integration is possible for skills endorse on their platform
Expandable/collapsable content
The expandable/contractable content is something I’m very familiar with as a front-end developer. From my early exposure to jQuery Accordion widgets (when it wasn’t part of the HTML spec yet) to the user off the <details><summary> tags of modern HTML5 development, they're really useful for presenting users with top-line information that they can look at in more detail is they wish. This will be great from an Information Architecture perspective, as well as a way of not overloading the user with all the information all at once.
On the flip side, there may be information that might be missed and this is probably where very clear signifiers will help. I plan to use this for the skills area where the user can see all the skills they have learned or bought on board and expand them to see more information on where they have used the skill and how many people have endorsed it.
Drag and Drop
I intend to use drag-and-drop functionality for reprioritising the skills users learn, which will influence the recommended volunteering opportunities the user sees. It is a really useful way of reordering a list intuitively; especially if they have obvious signifiers like the 6 little dots (figure 2) (Heydaryan n.d). It looks like it is natively supported by Apple (Apple n.d.). This will be one I have highlighted as putting out for usability testing.
References
Apple inc. n.d. ‘Drag and Drop’. [online] Available at: https://developer.apple.com/design/human-interface-guidelines/patterns/drag-and-drop/ [accessed: 07/03/23].
BROWN Clementine. 2021. ‘Week 7: From Wireframes to Prototypes’ Canvas Falmouth
University [online] Available at: https://learn.falmouth.ac.uk/courses/283/pages/week-7-from-wireframes-to-prototypes [accessed 08/03/23].
COOPER, Alan, Robert REIMANN, David CRONIN, Christopher NOESSEL, Jason CSIZMADI, Doug LEMOINE. 2014 About face: The essentials of interaction design. Indianapolis, IN: Wiley.
HEYDARYAN, Alborz. n.d. The perfect drag & drop: Figma community, Figma. [online] Available at: https://www.figma.com/community/file/1147359808629888681/The-Perfect-Drag-%26-Drop [accessed: 07/03/23].
HIGGINS, Krystal. 2020. Better onboarding. New York: A Book Apart.
MCKAY, E.verett. 2013. UI is communication. Morgan Kaufmann.
Microsoft. n.d. ‘Sign In with LinkedIn’. [online] Available at: https://learn.microsoft.com/en-us/linkedin/consumer/integrations/self-serve/sign-in-with-linkedin [accessed: 07/03/23].
YABLONSKI, Jon. n.d. Jakob's Law, Laws of UX. Available at: https://lawsofux.com/jakobs-law/ [accessed: 07/03/23].
Figures
Figure 1. CLARKE, Daniel. 2023 . Hotspot prototype for adding a skill
Figure 2: HEYDARYAN, Alborz. n.d. The Perfect Drag & Drop Guideline From: https://www.figma.com/community/file/1147359808629888681/The-Perfect-Drag-%26-Drop
Comentários