Do only robots follow task flows or super humans that don’t ever second question their actions? These are my initial thoughts after completing my first flow journeys while learning about UX. Yes, I know the importance of them. They help show the designer the key screens that need to be made and what features the user will essentially run into while on their journey. It’s all about the flow running smoothly, like water streaming down a river with rich soil and no rocks or pesky salmon swimming upstream to get in the way.
Why am I making these odd metaphors about flow journeys? Because it helps me understand how vital they truly are to the process of creating a user friendly interface. I am getting oddly off track, because today I am sharing about the flows and patterns of the notes app on the iPhone. Just for fun let’s look at the evolution of the notes icon through the years below.
This seems very revealing but this is the typical flow that I go through while using the notes app.
The high level tasks of the notes app is creating a note (start) and saving it (end). There are many new features that have recently been added to the app which would create more patterns for the user to interact with while going about their flow. I’ve been a user before these features were added so my user flow is a bit more streamlined because I usually forget the new features are there and just really want to write down a thought that I have. These flows then help guide the design process and can include wireframes to see how to aid the user in each task and can even be used as a hypothesis to start from when doing the user testing once the high fidelity prototypes are made.
The top one is called a task flow which is the one for robots that I was mentioning before. The most streamlined flow that takes place in the app which then UX designers but essentially the whole team can then figure out what screens to work on to make the task flow seamless for the user. There is a key to read through each step: start/end, user actions, thought/ decision, and pages that the user would land on as the result of an action.
- main flow that can then be built off of or used as a template when creating different user flows
- doesn’t go into the nitty-gritty (but we’ll get there through the user flow)
The User flow featured on the bottom is more human because this is the flow that I actually take while using the app. And this user flow is when I know exactly what I’m writing too. I may go back and forth, get distracted, add to other notes, copy and paste something from the internet. But all in all, it’s the most streamlined user (me) flow that I would take when I have a thought in mind.
- features what happens before the actual start and end points
- includes more thoughts of what the user is thinking
- shows all the possible yes and no points of a flow
- goes into more detail of how a user will interact on a page or ui elements in the website or app
One thing while using this app, you really can’t make errors. It’s a notebook and anything goes into a notebook. Now there are all the new features that feature new patterns which make it even more like a notebook like drawing, adding in photos, and personalization of lettering. I’ve noted them below.
- This icon once clicked leads you to a menu bar (#2) for all the options you can do with your completed note.
- So many options here which are slightly hidden in the icon if you haven’t used the notes app before. The hierarchy features the note you just made at the top, 4 icons which lead to the main actions you may want to take (nice color palette!), and then the rest of the tasks are listed below grouped into categories based on the depth of the rounded lighter grey rectangle.
- The only error I’ve made, before it updated it’s UI, was deleting notes when not meaning. This happened due to the garbage icon being located at the bottom right corner of the notepad which was always somehow pressed without meaning to. Don’t worry they’ve made it a 2 step process to delete a note now. Gladly they’ve hidden it in this menu panel so notes will not just disappear on you if accidently brushing the button.
4. I love that this panel above the keyboard features all the additional actions that you can add to a note. This pattern is nice and user friendly without being overwhelming since these are new functions are the app. All of the icons are designed well with thin lines and nice use of white space within the icon design.
5. This UI pop up is a pattern I’d add to my personal toolbox. I like that you’re still able to see all of your options as the user, yet you’re focused on making a decision for what you want to do once the camera icon is pressed.
6. This is the panel bar that features all the functions you can use to document a note. Menu includes: table, different fonts, bullet points, camera, and drawing. My personal favorite are the interactive bullet points. You’re able to check them off once a task is complete.
7. This feature slides up to cover the key board. There are many options to organize what you’ve typed. Different types of bold lettering, italicized, underlined, numbering, you name it.
8. As most of their features seem to be they will slide up from the bottom of the screen. I don’t usually use the pens and markers because this is hard to use without a stylus.
9. Creating a folder from the home page. Another feature I really love because I can organize all my notes into different places, even though most just end up in to the general folder “All iCloud” I appreciate some sort of organization can happen with this button.
10. A pop up just like the 5th callout. It seems because taking photos and creating a folder are bigger tasks within the app this may be why they have pop up UI elements versus sliding up from the bottom.
Simply, I love how simple and minimalist in design it is. That’s why I have nearing 300 notes in my phone that can nearly disappear since I have not been saving to the iCloud.
The one downfall of the app as I had mentioned before is notes getting lost in folders. Which I feel is a real life dilemma as well. The search bar is convenient because then I can look up key words that I think the note has, but there has to be an easier way. This is why I use Dischord to organize my creative inspiration on to. I use this for multiple purposes: organize my creative inspiration and connect with people that listen to my podcast. But I just admire how on Dischord I’m able to create different channels and then each channel is themed and I know the links to inspiration I will find in each one. There’s no more folders in folders on Dischord to sift through. The notes app has made it easier to organize your thoughts and put them into folders, but sometimes with so many options is can get chaotic and notes will become lost in the folders of folders. The perfect notes app is simplifying it to a search bar and no more folders.
