July 6, 2016 - Comments Off on How to Troubleshoot InVision Sync

How to Troubleshoot InVision Sync

If you're like me, you might work somewhere that uses InVision for prototyping apps and websites. It integrates with Sketch through a tool called InVision Sync. This tool can solve a lot of workflow issues when uploading screens, but sometimes has its issues. In the past week, I've had some major problems with one of my projects at work. When I turned to the InVision documentation to figure out how to resolve syncing issues, there were no definite answers. I also had great difficultly finding solutions by Google searching. I want to document some measures you can take to get your project back up and running smoothly as soon as possible.

1) Manually Save in Sketch

Auto Save is pretty awesome, but sometimes it sends too much info to the Sync client at once and confuses it (or at least that's what it feels like). A good ol' Command (⌘) + S will occasionally get the message across and get the sync going.

2) Pause & Resume Syncing

Sometimes simply going to the InVision options, clicking "Pause Syncing," waiting 10-20 seconds, and then clicking "Resume Syncing" will do the trick.

pause_sync

3) Log Out and Back In

If the pause/resume method won't work, this slightly more extreme method can fix it.

logout

4) Quit InVision Sync, Then Reopen

quit

Sometimes this will initialize the gloriously successful file sync you have been looking for your whole life.

 

What to do Next

If none of the above solves the problem, you might be suffering from what the InVision documentation refers to as a "broken sync." From what I have read, once you get your project here, you can't do anything to fix it.

InVision's advice on avoiding a "broken sync"

This is not true though. This is not the end of the road. Your project can be saved. Stay calm. 

5) Rebuilding the project

If you think you are suffering from a broken sync, here's how to fix it:

  1. Save your Sketch file locally. Make sure you take the "Assets" folder too if you got anything important in there.
  2. Go to InVision and archive the old prototype, you don't want to mix it up with the new one.
  3. Create a new project and give it a new name. Probably not a good idea to name it the same as your broken project.
  4. Once your project is created, there should be a new empty project folder in your InVision folder on Finder.
  5. Then you can move over your files you saved locally. Be careful though, losing the file structure in that folder can break your sync again.
  6. After that, you should start seeing your screens appear on your InVision project in the browser.
  7. Unfortunately, there is no way to transfer your old links and transitions. You have to go back and manually re-create them.
  8. You should be back up and running after this! Happy prototyping :)

June 29, 2016 - Comments Off on New York Smashing Conf Recap (The Full Version)

New York Smashing Conf Recap (The Full Version)

This post was initially published in a shortened form on the Evolving Media blog.

I was absent from the office for two days last week, but it was for a good reason: I was volunteering on the event staff for New York Smashing ConferenceSmashing Magazine, a digital publication for web designers and developers, puts on multiple conferences around the world every year to spread innovative ideas in the realms of art, technology, design, and development.

IMG_0460 (1)

This conference is an amazing opportunity for people in creative occupations to get together, discuss their newest ideas, and explore ways to improve our industries. Speakers showcase products and the process it took to make them successful, live-code to demonstrate new technologies, and provide insight about how we can move forward to keep making great work as the world evolves. Attendees are very connected and can contribute questions for the speakers via Twitter, and are often given time to network with everyone else involved in the conference.

The Talks

We had some pretty awesome designers, developers, and content creators present their work, process, and ideas at the event. Being a designer myself, I found a lot of these talks pertinent to my work.

Paper, Plastic, & Pixels

Brendan Dawes was the conference's first speaker. In his work, he experiments with the ways people and tech can interact to create engaging experiences; his unconventional projects combine digital interactions with analog objects, giving digital experiences the more intimate and personal feel of interacting with an analog object. A lot of what he's doing ties into good practices in UX design.

He presented these really interesting installations, in which a receipt printer in a custom 3D-printed box could capture Tweets and print them out for people to read and take with them. Considering the typically fleeting and impersonal nature of Tweets, I think a project like this is a nice investigation into how we can help users feel more invested in content.

Atoms, Modules, & Other Fancy Particles

Alla Kholmatova, an interaction designer at Future Learn, gave a lot of insight into developing pattern libraries for web products. She had a lot of great ideas about the ways developers and designers can work together to keep sites consistent, and prevent tragedies like this:

The pattern library she created is a great application of her ideas.

Alla also really focused on how to get people to actually use the modules in the guide appropriately without diluting their original, assigned purpose. She spent a lot of time emphasizing how important it is to name module well. It might feel silly to name your "Learn More" buttons "minions," but it makes the module more memorable, and enforces that it will be actually used.

Dynamic Static Site Strategies

Phil Hawksworth spoke about static sites, and how we can use them in more projects than we think. In recent years, there has been a huge shift to CMS-based sites, and he believes it's often unnecessary. Static sites have many benefits, and thanks to technology like site compliers, content delivery APIs, and static site generators, there are a lot more options available to you before you start making a 4-page brochure site in WordPress.

Innovative SVG Animations

Sarah Drasner—a web animation genius—gave a talk on all of the experimental SVG animation work she's been doing. She focused primarily on GSAP, better known as Greensock, a timeline-based animation building tool. The timeline sets this tool apart; you can set the timing of events to be depending on one another, instead of having to calculate all the values yourself. It's really powerful, and it was amazing to see all of things you can accomplish in action.

Sarah also talked about removing some of the stigma associated with SVG, and how it's very widely supported nowadays, making it a viable option for your next project. A big advantage to using SVG is their much smaller file size, as well as the ability to scale the graphics really big without experiencing pixelation (because they're vector-based).

Connected Devices in a Connected World

Stacey Mulcahy gave a talk on her work with connected objects, which she believes can reach beyond the "Internet of things" into hardware—a lot of which we can make ourselves. She demonstrated new technology she has been experimenting with, including Javascript frameworks for robotics and Neopixels that respond to your Twitter activity. I'm not really sure how her job became making silly, fun things all the time, but I'm very sure that I'm jealous of her life.

The Future of Preprocessors

Roy Tomeij is a literal wizard when it comes to SASS. He was doing all kinds of crazy stuff with it in his demos, including mapping animation with ASCII characters (seriously). Would this be practical for the average SASS styler? Probably not. Was it cool as heck? Absolutely.

But on a more serious note, his talk explored whether or not—one day in the future—normal CSS could adopt all of the features we see in preprocessors, making them obsolete. He explained that the role of SASS thus far has been to develop new ways of styling elements without having to wait on the lengthy process of getting those methods adopted formally through the W3C. He concluded his talk on a really bright note:

The Secret Life of Comedy

Espen Brunborg touched on some pretty serious topics, such as the synthesization of the web, in a fun way. He started out his talk with an web design-themed version of the Genesis Creation Narrative. I really liked Espen's talk because, unlike many discussions on how the web is looking more and more the same, he stopped to observe the necessity and the useful aspects of that.

Yes, we do want to make web content that is unique to our brands and that have personality, but there is merit to using cues that users understand. There needs to be a balance between the common cues that make our user's experience better and the the things that can make our sites more interesting and identifiable.

He came to the very elegant conclusion that every website, no matter how big or small, tells a story. And as web designers and developers, we are storytellers. Yes, most stories have basic constructs that we use to make them easy to follow, but there are many different stories out there. The layout of a site should be coming from what its content is, not what your template tells you to.

Adapting to Input

Jason Grigsby discussed the design principles necessary to create sites that adapt to new, unknown forms of input. Jason believes that, when the web industry started to see a need for responsive web design, we went about it the entirely wrong way.

We're coming to a point where input is becoming just a complex as screen size. We have gone from having just keyboards and mouses, to having touch screens, shake detectors, and even gyroscopes incorporated into our devices. We can use these new methods to our advantage, but we also can't assume any one type of input is always there. (For example, there's currently no surefire way of detecting if a user is navigating using a mouse, touch screen, voice control, or even an Apple TV remote.)

One effective way to adapt sites for new or unconventional inputs is by designing for accessibility. If you design a site to work well with voice control for assistive technology, someone who doesn't need assistive tech will still be able to navigate your page using the voice control options on their Xbox Kinect.

Peace, Hellfire, & Outer Space

Seb Lester was our mystery speaker this year, and the first speaker of Day 2. He walked us through the highlights of his career as a type designer: designing a font used for in Intel's branding for an extended period of time, getting asked by NASA—via a spontaneous e-mail—to design a mission logo, and eventually moving toward the calligraphy- and illustrative-type prints that have made him Instagram-famous. Many know of him from the hand-lettering videos he posts there.

Writing in the Real World

Kate Kiefer was a change of pace for our speaker line up, because, unlike most of the speakers, she's not a designer or a developer—she's a writer. But that doesn't mean she didn't have valuable insight to share with us. Writing in professional scenarios is something designers and developers do every day, but most of us have never been trained to do so outside of academic writing, which is quite different.

Kate works for MailChimp, where she directs all of their digital communication. Since it's a large company, she helped create a content style guide (which is open source!) to help all of the people writing their material keep it consistent. In her talk, she presented some basic tips for writing in a professional way that isn't overly sterile or robotic. I found it really helpful. (If she see this, I hope she can tell that I learned something before writing this recap!)

CSS in the Age of Components

Glen Maddern schooled us on the possibilities for improving the way we make style sheets. He talked about what makes a style sheet "demonic," and how we can put good practice in place to prevent that. His talk was centered on making style sheets more modular and focusing on local variables, rather than global.

He showcased one of his recent projects that seeks to alleviate this problem, called CSS Modules. Something I found really interesting about the project was the ability to compile class names in a project to be simpler, decreasing file size. One example he presented: class names compiled to Emoji. Not 100% sure how useful that really is, but it sure makes for a fun document view in Dev Tools!

The Features of Highly Effective Forms

Aaron Gustafson has a background in making online forms more usable, and getting more people to actually fill them out and submit them. He honed in on UX concepts that could make the form experience better. He explained how the language of a form impacts how successful it is, and how important it is to ask questions like you would in an in-person conversation.

He also discussed using ARIA labels to make the form better for users on assistive tech, but also the users who are not. If a field isn't "required," it may be good practice to ask yourself why you're bothering to include it; it's easier to place one sentence at the top of the form that says all fields are required instead of asterisks on a few of them. He also believes we should be working with the warnings built into browsers that notify users a form is filled out incorrectly before they try to submit it.

Performance Under Pressure

Mat Marquis talked about issues surrounding performance. While performance is so often forgotten, it's an integral part of creating an inclusive web. For example, this talk discussed the importance of considering the experience that someone using a 5-year old Android phone might have on our sites; when we don't consider people using older or cheaper tech, we make the web a place only the wealthy can really use or enjoy.

Mat presented ideas about how to load pages more efficiently and improve the performance of our sites. A highlight for me was his idea of inlining the CSS of all the elements that are "above the fold" on a page, so the user can see everything styled before all the styles on a page have actually loaded. Maybe this idea could be improved upon—inlining styles is not considered a "best practice"—but it may be a sacrifice worth making for your users.

Driving Culture Change with Design

Frances Berriman is a front end developer who worked on the single domain gov.uk project at at the Government Digital Service.

She talked about that massive redesign project, and how she was able to change some of the company culture in surrounding departments at the time of the project. Since the project was so long and detailed, she and her team came up with ways to celebrate successes and stay motivated. One way they did that was by designing stickers to stick on their laptops when a milestone was reached. Other departments liked it, and started to adopt it for their own projects.

She had a lot of ideas about large-scale UX projects, and how to make sure you're user testing, even if you don't necessarily have the facilities or budget to do it formally. For example, she and her team conducted user testing in their own office by recruiting people who hadn't worked on a particular element to try it out and describe their experience with it.

The Physical Interface

Josh Clark shared some ideas, values, and principles on the Internet of Things and its relationship to UX design. Josh's work focuses on designing for touch screens, including the ways that we can make the digital experience more physical, with more realistic interactions. He argues that our screens should play a role in "captioning" our lives, instead of framing them.

With all of the sensors available to us in our devices, the world around us is becoming more and more a part of interface—and that environment is just as important to the user experience as the interface itself. Designers should be seeing the physical world as an asset to the products we're creating, and an opportunity to enhance our user's experience.

Final Thoughts:

I absolutely love this conference! Out of all the events I attend in New York, this has to be one of my favorites. I find the attendees and speakers here are very well connected, and conference-wide communication is highly encouraged thorough Twitter and and the conference Slack channel.

The Q & A section after each talk is really well done. Anyone in the audience can Tweet their questions during the talk, and then a moderator uses those questions to interview the speaker after the talk. If your question isn't asked, you can either Tweet at the speaker, send them a Slack message, or just walk up to them on a break. All of the speakers seemed really interested in engaging with the audience and getting feedback.

The overall atmosphere is very friendly, and everyone running the conference is passionate about what they're doing. There's a lot of room for fun and laughter in between all the learning and sharing that is going on. This was my second year in attendance, and I definitely want to be back next year!

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.