More selected projects

Your Portfolio is empty. You can start adding Items throught your Wordpress admin panel!

All Posts in User Experience

February 29, 2016 - Comments Off on Mobility Map Mobile Prototype – Call for User Testers!

Mobility Map Mobile Prototype – Call for User Testers!

I made some pretty big strides in getting a large amount of the screens for my Mobility Map prototype done this week! Here is walkthrough of my prototype as it appears this evening.

 

 

As usual, you can have a more ~interactive~ experience if you head over to my inVision prototype.

Moving forward, there are several things I'm going to need to be doing as we approach my ambitious deadline to have desktop, tablet, and mobile prototypes I am proud of by spring break. I am going to start collecting feedback on my mobile prototype through some user testing, but at the same time this week, I'll be translating my concepts for a phone screen to that of a tablet.

User testing is going to be pretty informal, and just using the commenting feature built into inVision. I'm probably going to make a post of all the feedback I get, and how I'm going to make changes to address it.

If you are interested in testing, follow the link to the prototype on an iPhone 6 or a desktop computer. Below is a quick video on how to use that feature if you haven't before. If that isn't working, feel free to just comment on this post or email me.

 

Overall, I feel that I am in pretty good shape! It's really cool to see this coming along.

February 15, 2016 - Comments Off on Thinking About Accessible UI Animation

Thinking About Accessible UI Animation

I basically have given myself 2 weeks to work out my mobile mockups. The way I intend to go about this is to do quick sketches if needed to help myself visualize the identity applied to the UI concepts and information flow I worked out last semester. Here's some examples of what I did for the home screen and menu right before starting to lay it out in Sketch.

IMG_0221IMG_0222

I've also been working on how the animation for the menu items is going to work.

Making the design decisions associated with the motion has been done with accessibility in mind. since I started this project, I've been looking out for resources on motion design for UI and its relationship to accessibility. One of the best resources ob this topic along with good explanation can be found in Val Head's A List Apart article on the subject (she also put out a great list of resources about it!). She explains the issues with current UI design trends (parallax, scroll jacking, etc.) and provides examples in how the implementation of these motion effects could be problematic for the user experience of people with disorders that result in motion sensitivity (vestibular disorders, vertigo, dizziness, migraines...).

There are also suggestions in the article about how we can create meaningful UI animation that contributes to the users experience. In terms of accessibility, it is very important to keep the animation consistent, and make the user feel like the animation that takes place is logical and does what they expect. In my example above, all my transitions make sense in that they are chronological and logical. If the user opens the menu, it slides in from the right, and if you close it it slides away back to where it came from. If you try to visit the add a point screen, you will be advanced to the next screen on the right via a slide animation, and when you want to return to the map, it will reverse the way you slid in. I intend to continue to follow this concept through all my screen transitions.

I'm going to avoid any automatic animation. The user should be in control of when things start moving around. Animations should also not go on for more than 5 seconds according to WCAG Guidelines, unless there is a way for them to be paused. I don't think there's any real need for this kind of animation for what I am making, but I felt it was worth mentioning.

 

 

February 8, 2016 - Comments Off on Refining Identity and Starting to Apply it to the UI

Refining Identity and Starting to Apply it to the UI

This week, I have been working on furthering the visual identity elements, and thinking about how I'll be applying them in the user interface of Mobility Map.

I've formed sort of a "style guide" and built more onto the visual identity I have developed so far. As I'm working through my identity, I'm checking it against simulations of the most common forms of color blindness.

Screen Shot 2016-02-08 at 12.12.21 AM Screen Shot 2016-02-08 at 12.13.31 AM

I added some ideas for what I want body copy to look like, as well as thinking about how my stylistic concepts apply to the UI. In the style guide, I included a more finalized sample of a Mapbox theme optimized for accessibility. I was influenced by this terrific blog post that walked me through some ideas for using Mapbox Studio to create a more accessible basemap. It uses a primarily monochromatic color scheme, and uses Lexie Readable (a typeface optimized for legibility for dyslexic people- a little Comic Sans-ish but pretty sound when all uppercase) for the labels.

logos

I currently am having difficulty getting the map to label the buildings properly, but I have submitted a ticket to the Mapbox team, and hope to receive assistance with it soon. I also hope to create another theme that uses the DIN Round Pro from the logo instead of Lexie, and perhaps one that isn't optimized for color blindness. The idea would be the user could select which basemap they prefer.

This week, I'm getting my mobile prototype off the ground in Sketch. I've got my project set up with inVision Sync, so I can see it update on the prototyping platform in real time as I make changes to my Sketch file. I started applying my Home screen concept to the Sketch file, which then transferred over to inVision seamlessly!

Screen Shot 2016-02-08 at 11.57.38 AM  Screen Shot 2016-02-08 at 12.08.50 PM Screen Shot 2016-02-08 at 12.09.16 PM

This week I'm going to finalize basic interactions with the menu and make some interactivity decisions for the home screen, which will then be applied throughout. I'm probably going to be looking into animation acceptable for use with vision impairment along the way. I'll share my resources as I come across them, as usual.