👋 Oi, mga repapips, Brian Dys here! I love music, photography, and creative stuff like UX design and art. This is a place where I collect my thoughts and works. Apart all these, I’m Jaycelle’s better half and Bryce’s dad. 🥰
About Snippet
Categories
0
Comment
A UI Review is a testing methodology conducted by a designer (UI/UX/Front-end) on web products prior to Usability Testing.
The first aspect to be reviewed is visual design and the second is usability.
This is conducted primarily to ensure that the obvious negative findings in a Usability Testing are lessened.
Consider this scenario:
- a working mobile app is available for testing prior to production (launch)
- a designer will conduct a UI Review
- the reviewer will take note of visual design inconsistencies and usability difficulties
- the designer will revise the design based on the findings
- the mobile app is ready for Usability Testing
It is recommended that a UI Review is conducted on a working product rather than on a prototype or mock-up because this puts the reviewer in the context of actual usage and not just a replicated one.
Categories
Karin Alody Chan was part of Chikka Design Team as front-end designer. She has graduated from the position and currently pursues web design. This is her essay from an exit interview.
Working with Chikka Design Team has given me an opportunity not just to grow in terms of career but also with personal development.
Before I started working at Chikka, I didn’t have any confidence with my design and front-end skills because I know that I was a bit behind with all the new stuff that has been going on with the design industry, but because I’m passionate with what I do, I decided to challenge myself to be open to new things.
Everyone in the team has their specialization and common knowledge when it comes to UI/UX but this didn’t hinder them to learn new things and make design as a lifestyle. I like that we’re open to discussion and our team lead wants us to be innovative. I felt like I was in college because of the environment – in college we were trained to have the courage to talk about our design ideas and be able to defend our designs – like every detail should have a purpose and not just design something and put it in an empty space as filler. That’s what I felt with the team.
I am grateful that I was part of it. What I learned is that being humble is the most important thing you need to have if you’re working for a company because we learn to admit to ourselves that we’re not right all the time. I know there were times that maybe I try to defend my designs too much but it has taught me that sometimes it’s okay to just listen and accept other people’s perspective.
I think that this is, so far, the best team I have ever been to. I hope everyone the best of luck in the near future.
User Research
- Input – research and requirements; output – design artifacts, actual product
- How did we come up with the problem and solution?
- Have one solution and validate with users
- Set target users; create personas
- Continuous user research
- Improve the product for both the business and the users
UI Review/Usability Testing
- Refer to Components Masterlist
- Refer to Usability heuristics
- Create metrics
- Create activities and tasks
- Create directions on how to assume a persona
I’m in the process of letting go/disposing of/getting rid of/selling stuff that I no longer need around the house. In line with this activity, I signed up for two online shops, namely: OLX and Tackthis. Both offer free registration so I went on to set up my online shops.
Just a disclaimer, this blog post does not intend to rigorously compare the two services – I would simply like to document my experience as a user/seller – specifically the noticeable stuff whether positive or negative. Also, this could be an ongoing piece of “review” as I go along with this new adventure of garage selling on the internet.
We’re working on two projects that we’d like to share with you – Visual Variables and Animation Diagram – both of which aim to bridge communication between visual and front-end designers working on web projects.
Check back on Monday for updates.
10/8/2014
Visual Variables and Animation Diagram are available!
The layout of HTML Patterns contains the following:
- web view of the HTML markup and CSS
- source view of the HTML
- source view of the CSS
Both the textarea of HTML and CSS are editable to immediately update and reflect the changes on the web view.
The Problem
One thing that gets in the way is that the stylesheet of the site gets applied to the content in the web view. The favorable behavior is for it to appear unstyled by default and only the CSS in the source view will affect it.
Possible Solutions
- Contain the web view in
divand usestyle scoped - Reset the style by targeting the parent selector of the web view container
- Use
iframe srcdoc
Each of these solutions are not without quirks. I will do a quick follow up as I test for the best solution in this situation.
Stay tuned!
10/01/2014
As far as HTML Patterns is concerned, I settled with #1 – the original solution. Although style scoped is only supported by Firefox, the important thing is that the HTML markup is seen and it is interpreted in the web view. An advantage for Firefox users – they will get to see the style in the web view, too.
Regarding resetting the style of elements in a specific container, the CSS property all and its value initial, again, is only supported by Firefox. What I did was to manually reset each property that was previously set by the HopScotch stylesheet.
iframe srcdoc works best in bringing back the style of the content to browser default but it’s hard to control when it comes to live-updating the CSS (aside from the fact that, again, only Firefox supports that attribute).