I’ve added a new category on the blog called ‘Sidenotes’ to share things other than the development and design implementation process of my thesis. Today I am sharing an article from Smashing Magazine that is by far my favorite article from SM called The Messy Art of UX Sketching. I start my UI design projects by sketching first before heading to the computer. It helps me figure things out easier like design elements, features and interactions instead of sitting in front of the computer waiting for it to happen. The pictures in this article look exactly like how I started the wireframes for my thesis, except I used pen and graph paper (and oddly enough, the UI even looks similar). Very helpful article for UI/UX designers!
Light feedback, but progress is being made. I am establishing a grid system and finding elements that need to be repeated for continuity. The suggestions in the famous list form:
- page numbers need to be moved – the one necessity I am struggling with. Placement is tricky with pagination!
- save button needs to be moved
- all instructions are set in italics
- increase size of headings
- spacing between sections needs to be adjusted
UI screenshots are coming soon!
Here is the feedback I received last week.
- “Add Another Contact” under emergency contacts and the “Save” button need to be smaller
- There should be a “Submit” button for each section
- Is the rule necessary under certain headings for the content of each section? If so, color is something to think about
- Work on typography and contrast
- Point size in text of mainNav could be slightly larger and centered
- Sizing of input boxes should have consistency (use smaller boxes as guide for larger boxes)
- Consider a drop shadow or some other type of depth for the “You are here” state in the mainNav
- Content in each section should be color coded so that it related to the color of the button in the mainNav
I also need to conduct my first usability test, which will be a quick, mini test to determine which color scheme people prefer out of the few mock-ups I designed. Of course, there is the possibility that none of them are well received, but hopefully that won’t happen!
That is plenty to keep me busy!!
Things are progressing, just not at the rate I would like them to. While designing the wireframes, I’ve become aware of many things that would be helpful and problems that need to be worked out. I definitely picked a challenging design problem to solve!
This week I’m at the point where I can start designing the GUI in Photoshop. Once I’ve got the design of one page down, it will mostly be just a matter of changing content with each page because I’ll have a template done so I should be able to catch up to where I want to be at this point in the process. Here is a round-up of major changes, new additions, and other ideas:
- I thought I had a name, but have now decided to scrap it after a quick search yielded some results with the same name in technology related software. I don’t want there to be any confusion so I am back at square one with the name game. Sigh.
- The print-out will be one color leaving me with more freedom to work with a large a color scheme
- Choosing a color scheme is proving to be harder than I thought. It seems I need more colors in this palette than I am used to in terms of designing for the screen.
- Pop-ups will be utilized to save screen real estate.
- I included pagination to reduce the amount of scrolling.
- There will be a specific list of activity that the user will be able to showing everything they updated during their last sign-on
- Some type of a “Why are you asking me this?/Why is this information important? link or button will be somewhere in certain sections for information that has to be filled in
- The risk of losing information after spending quite a bit of time filling it all in is a worry I will take into account. Users will be prompted with a warning pop-up message to save their information if they forget to click the “Save” button in the bottom right corner.
I think I’m actually at one of the most difficult points with regards to the design process because the challenges from the wireframes all seem to be colliding with the start of the design of the interface in Photoshop and I’m still trying to finalize features. Just trying to keep pushing through at this point!