Maskari

CS1300 Blog

[rungeinterfaces-blog]

Post #9

This week I’m writing about Dropbox’s new text editing app: paper. Paper is still in beta so you have to sign up on a wait list to access it, but I received an invitation to try it about a week after first signing up. 

In the few days I have been using paper, it has become my favorite text-editing application. One reason I love paper is because of its design. It is very simple and minimalist, with text that auto formats and auto sizes easily. Paper is also great because it was made for collaboration. Similar to google docs, you can share your paper file with as many people as you want, and they can edit the document with additions of their own or comment on other people’s content. Photos fall right into place next to or below text, and with keyboard shortcuts you can create to do lists, add emojis, and link to other documents. I used paper to study for an exam the other day and I loved it! It was really easy to make lists and I even quizzed myself by putting the answers in the collapsible comment area. 

There are definitely improvements that could be made to Paper, but I think it is the closest a text editing application has come to mimicking the way people really think and collaborate. 

[mani-askari-blog]

Yes! Dropbox products are very UI friendly. After checking out the application, it seems like google docs is not the only effective text-editing collaborative environment anymore which does not surprise me. I do like their UI because of its simplicity and learnability. It is very similar to GDocs which many users are familiar with. Its efficiency is high since most of icons, colors, and buttons are informative and easy to understand. Navigation is amazing and simple and does not distract the user as much as other applications.  Embedding pictures is also very nice and effective. I would use their production version as soon as it comes out! Great Post!

[justuandi1300-blog]

Post #9

A while back, I blogged about the poor design of Apple Messenger’s search feature. Essentially, the problem was that the app would list all search results without providing any ability to a) jump between those results, or b) examine the context of each result. Recently, I tried a new messenger app called Slack with a team I work with, which solves these problems nicely.

On the right of the screen, you can see all search results with a timestamp. (Note, that the overall context of search result is shown grayed-out in the background.) If you click “jump” on a certain search result on the right, the conversation on the left will scroll to that part of the conversation.

[rungeinterfaces-blog]

I did a competitive analysis report on Slack over the summer and know almost everything about their product. In general - Slack is an amazingly designed interface, people love it for many reasons, but the biggest one is that it is easy to use. This is even more impressive considering that it is a tool that originally started among developers, and has very good functionality for code sharing and third party app integrations.

[mani-askari-blog]

What a great post! Slack is one of the nicest chat system i have used while working as a developer in various companies. Its usability is so simple that i can get anything done without the slightest effort. Its interface is appealing that makes me want to have conversations. The “Channels” feature is awesome and allows me to categorize who i am talking to and how to talk to them. It is consistent with my mental model as a messaging application. Although i have not used for for months now, I hope they keep the simplistic design and not try to add unnecessary extra features to this application. Great job!

[mani-askari-blog]

Post#10

Facebook “add friend” feature. After reading Adam’s article discussing how different our relationships are online relative to our offline life, i was reminded that Facebook put all people in my life in one category “Friends.” My family, colleagues, primary friends, temporary friends, and the butcher across my apartment can all see, view, comment on all my posts unless i filter them out one by one. I would like to be able to categorize my contacts in a painless way that allows me to control who sees my posts, who can comment on them without trying to iterate through all my contacts every time and filter them out. The lack of this feature causes frustration and decreases the efficiency of use for the site. I strongly advise Facebook to allow “contacts” categorization just like the one Google Circle has!

[everydayinterfacebook-blog]

Post #9

I am a big fan of the New York Times, and I particularly enjoy reading their content online. That being said, I do think their desktop site has room for improvement. In terms of layout, the homepage is obviously modeled after the front page of their newspaper, which makes sense in terms of the user’s familiarity with the format of a newspaper. The information displayed “above the fold” on the desktop site feels natural from the user’s perspective because it so closely mirrors the original version of what they’re seeing. However, the format is not adaptive. When the user narrows the width of their browser window, the user then has to use the bottom scrollbar to view all of the information on the page. The columns and photos are not responsive to the user resizing the screen. Additionally, this format is likely to leave the articles posted on the right side of the picture getting fewer views than those on the left. Since people who read in English do so from left to right, users are likely to skim the articles on the left side of the photo and then scroll down, rather than look to the far right of their screen. 

[mani-askari-blog]

You could not be more accurate about the UI flaws New York Times has. I believe they try too much to mimic the physical newspaper which as you mentioned is for compatibility reasons and user’s comfort and familiarity to the real paper. The problems with content size responsiveness can be frustrating as you mentioned and can cause unnecessary horizontal scroll which is not familiar nor appeal to web users. Also, the contents on the right of the screen can be ignored as you mentioned. I would suggest that NY Times change their layout to responsive one which automatically resizes contents so horizontal scrolls are eliminated. In order to avoid keeping some contents always on the right, i suggest they allow users to shuffle news with some sort of priority on the news being rendered so that all news get fair attentions. Great Post!

[mani-askari-blog]

Post#9

Twitter Bootstrap! It is a great tool for making consistent UI for web development across differently sized devices such as mobile phones, desktops, and tablets. I have used it for many years but the problem that i always encountered when using their website is the right navigation that does not expand to the end. Since the content is heavy on the site, it takes time to find the appropriate content i am looking for. Although its learn-ability is high, its accessibility and efficiency suffers since the user constantly need to scroll up and down through the page. I wish i could see all the components in main page, and click on it to see more details! 

http://getbootstrap.com/components/#input-groups

[justuandi1300-blog]

Post #7

Since the introduction of OS X Lion, auto-save is not uncommon – many applications such as Preview, iWork and TextEdit support it. But in all of these applications, save and save as remain an option. The new Microsoft OneNote has a more radical approach to files and saving.

1. There is no option to save at all. Files are auto-saved and that’s it – there’s not even a save as option.

2. There are no OneNote “files” visible to the user. Instead, information is stored in a notebook with multiple sections, which have multiple pages – much like a physical ring binder.

OneNote represents a radical paradigm-shift that is very much in line with Cooper’s philosophy; it successfully hides the workings of the filesystem from the user.

[wu-julia-blog]

This is an excellent observation. I’m an avid OneNote user, and I still find myself pressing CTRL+S all the time even though I know there’s no need to manually save. But even when I do stop trying to save, I like to make sure that my notebooks are running sync as often as possible, and OneNote also seems to do an efficient job at keeping my notes consistent across different platforms and machines. Another relevant point brought up by this post is that the concept of individual files is changed in OneNote—everything is stored in a notebook and accessed by the UI, and a user does not need to worry about opening pages on their own.

[mani-askari-blog]

I have never used OneNote before but after your post, i did look at it and i liked its interface and its auto-save capability. To be honest, the auto-save is a great feature and should be implemented everywhere to hide the inner workings of any operating systems from all sorts of users. That being said, any dramatic change as such should be incremental to change the user’s mental model in a more considerable pace. I agree with wu-julia as well. I constantly hit Ctrl-s simply because i am trained to do so. Not seeing any save button and file system structure can cause confusion, and frustration for more novice users that spent so much time learning the “old way.” so my suggestion for such applications is to plan their “auto-save” feature in incremental versions of their application helping all users to learn the “new way” in a slower and more logical steps. I believe the users should not even notice that an application has changed the manual-save to auto-save. Great Post!

[mani-askari-blog]

POST#8

Waze! a great navigation application that i used every week when i drive to new places. It has a great interface with countless features that are necessary for any driver trying to make his/her way around a new place. It has served me well and its interface is nearly flawless. The only problem is that recently i encountered multiple questions while using the app that interrupted my driving and caused difficulties and even frustration. Since Waze collects information from its users about the routes, police, and more, it has recently decided to pop up questions for all drivers that are using the app. While driving, it is dangerous to read/answer such questions and it might cause accidents and confusion. I tried to close the question box while driving, but there was no “x” button to dismiss the dialog box. I hope Waze changes its new interface and revert back to what it was before. More complexity does not make an app better!

[justuandi1300-blog]

Post #6

Typical mechanical pencils allow the user to extend the lead by pressing on the eraser on the top of the pencil. This makes mechanical sense – the only way to extend the lead is to push it downwards. But it is not a good user interface, as it leads to to frustration and wasted lead, when the user accidentally extends the lead while erasing.

Today, at the Brown Book Store, I discovered a superior type of pencil. It allows the user to extend the lead by pressing on a button on the side – far away from both the eraser and the actual mine. This prevents both mistakes and getting the user’s hands dirty. Note, that the UI is good because it shields the pencil’s inner workings from the user to provide a more intuitive UI – just like Cooper wants to hide the inner workings of the file system – in order to provide a better user experience.

[mani-askari-blog]

Simple and interesting read! I do agree with you on this matter. In fact, i have experienced minor difficulties with the old-style mechanical pens for a while and it is a shame that they still exist. They cause waste and sometimes (after erasing with the top eraser multiple times) they cause dirtiness on your hands and fingers. The new design you mentioned is a better interface in my opinion but i believe it could even be better. With the current designs, you still need to stop writing every now and then and get more “pen” by pressing somewhere on the pen. You need to rotate/stretch your thumb to do so which is extremely annoying. I wish we could have cheap smart pens/pencils which would extend as soon as they detect it is needed. Great job on discussing a very simple but interesting UI design that i have never though deeply about!

[mani-askari-blog]

Post7

Today its all about Hacker News website backed by yCombinator. It has been my source of technology news every morning and i absolutely adore this website. There are however small interface shortcomings that i would like to point out here. As we learnt from Vingelli’s reading, the grid, text, font, and scale of the elements in the website are critical for the user to be attracted and comfortable to read and follow. The contents are well and simply listed one after each other but i do not personally like the font, color, and scaling/size of each list element. What i and others who i have spoke with need is a more descriptive summary of what exactly the news is going be about and a more stylish font/color to attract the reader. Although it is a site of web links, it is where all users go to find interesting topics for their needs. It would also be great to be able to sort the topics with specific company, technology, etc. Overall, the simplicity is appreciable but that does not mean the interface is there yet!

https://news.ycombinator.com/

[everydayinterfacebook-blog]

Post #5

I absolutely love apps that make my life easier when I travel. One such app on iOS is Passbook. Amtrak and all major airlines now allow you to add your mobile boarding pass to your passbook for easier access. Before passbook, but after the advent of mobile boarding passes, I remember either having to take a screenshot of the pass and then go into my photos to look for it to show it at security or my gate.  

Passbook was clearly designed with the user in mind. Within 2 hours of your flight departure, your pass appears on your lock screen, allowing you to access it with a single swipe whenever you need it. One clever update to the app causes your phone’s brightness to automatically go up to 100%, so you pass’s barcode or QR code is guaranteed to be bright enough to be read by the scanners at the airport. Passes are sorted by type, and travel passes are arranged chronologically. The Passbook app has a great interface because the people designing it put in a variety of features to benefit the traveler persona (often hurried, always carrying luggage). The app is very streamlined and easy to use, mostly because  it doesn’t require much input on behalf of the user. 

[mani-askari-blog]

I personally have not used this app but it sounds amazing! The fact that the user does not have to navigate through multiple pages or manually save documents/tickets in the photo albums seems like the designers have really thought its usage through. Further, the fact that the phone’s birghtness increases automatically reduces another user’s action to get the best out of the app’s functionality. When waiting in line in an airport or other ticket-issued place, it is frustrating to unlock the phone, navigate through your apps, then navigate through your app, etc just to find a ticket. It seems like the designers have hidden and automated all these extra steps and allow the user to use the app specifically for what it is designed to do. Great Post!

[mani-askari-blog]

#POST 6

After learning about the advantages of auto-save in class, i wanted to point out how amazing it could be if ALL popular sites/apps/IDEs migrate to having such feature in their software. Although we are all used to many buttons and specifically “save”, “confirm”, and “cancel” buttons, it would be nice to reduce the keystrokes and let the user focus of the main functionality of the site or app. One of the nightmares for a programmer (me being one as well) is using a great IDE for coding and making sure what i write is always saved. If not all, but most of IDEs i use today, all require the programmer to hit “ctrl-s” in order to save their current work. If you do not save your work and decide to close the IDE, you will be popped up with a window asking “if you want to save your work”. As in our reading in class, this feature is extremely annoying since if i did not want it saved, i would have not written it. I know it is not a big deal for us, but if auto-save was integrated in these IDEs, i would even have a better experience. There might be a setting for turning on auto-save but it should be the default behavior. An example is Eclipse for Java programming! Even a programmer does not need to know about the inner working of file system and the software he/she uses.

[rungeinterfaces-blog]

Post #4

The interfaces we encounter with our ios products are typically very good, as we have seen in many examples in class. However, there is one thing that I constantly struggle with on my iphone, and that is the Caps Lock / Shift button. 

As this photo shows, the shift button is a white arrow on a grey background when it is off, and a black arrow on a white background when it is on. The problem is that it is difficult to know if this button is on or off. While the grey button matches the [123] button and the backspace button, when the button shift is on, the button matches the other a-z keys, which doesn’t clue the user into the fact that the button is on. 

This problem could be solved by incorporating a good affordance into the shift key. If the button appeared to be pushed when it was on, if would be obvious that it was on, and to turn it off again the user has to push again. 

The image below is an example of a good affordance because it looks like a real button is pushed down in the second image. If this ios keyboard could incorporate some depth into their buttons, so that it was obviously pressed down, it would help users understand when the shift button is on. 

[mani-askari-blog]

I agree with your post as i have encountered the same problems using IOS or even Android decides. The affordance does not reflect the last action performed on the button too clearly. I have to point out that this causes a huge accessibility/learnability problem for the older folks these days too. I have seen my grandfather and event father sometimes getting confused as to how to turn the caps on and sometime wondering if it is on/off. This causes ridiculously worded/looking messages sent to the recipients as well. As much as i like simple designs, i feel like mobile devices can give a bit more contrast to their toggle buttons to make it more clear to the users what is on and what is off at any time. Great post!

[mani-askari-blog]

Post#5

I should have written about Windows 8 interface design long time ago. In my opinion, Microsoft lost many customers along with their confidence in many Microsoft products when it first introduced Windows 8. Beside the hardware/software problems W8 introduced, its interface changes were dramatic to the point that any dedicated microsoft user (including myself) felt stupid using the product and not only lost interest in the product, but also started disliking all other products offered by the company as well. vast number of UI changes decreased learnability, increased confusion, and annoyed the users. Huge icon-based tiles with small text, colorful boxes and lack of intuition for performing simple tasks caused me to put aside Microsoft products since then. One of the most annoying UI features was “which corner should i point to get to search?” or “Where do i configure my network settings?” The interface is so badly designed that much of the core functionality i liked and needed were buried deep within unnecessary tile boxes and transitions that i eventually became tired and switched to Apple products. 

[mani-askari-blog]

Post#4

Today I would like to point out the problem right in front of my eyes that i have ignored for the past four weeks, tumblr file attachment. For the first three blogs i have posted on this site, i struggled to find out how to attach an image to my post. The main page interface has a “text” and “image” buttons without showing how one can integrate two tasks. I had to navigate back and forth between “text” and “images” to figure out how to embed one in another. After a while i realized that when you pick text. there is a little tinny tiny “+” button on the left of the panel (in which i am writing in now) that you can click and add images. This button’s visibility has caused me to be less eager to blog in this site. Apart from being barely invisible, the “add file” button is also too small to point and click on. my mouse has to wonder around the button for a bit till i can successfully click on the button and add my images to it. Also, the images do not embed nicely with the blog making it unattractive to read. I hope this problem will be solved soon!

[everydayinterfacebook-blog]

Post #3

The old Brown Job and Internship Board (JIB), much like Brown 25 Live (see Post #1), appeared to have been designed 20 years ago. The website was updated approximately two weeks ago. While its design is much more modern and aesthetically pleasing, some critical features were not added to the new site, making it more difficult to use. Arguably, the most important piece of information in a particular job posting is the application’s due date. For some reason, the new version of the site does not always include this valuable tidbit of information. When you try to sort the postings by deadline, it shows you multiple pages of postings with deadlines that have long passed. Why are the old posts still displayed? In preview mode, on the far right you can see the date that the application was posted to the site. Does anyone find this information useful? Wouldn’t everyone rather see the deadline in this spot? When you click on one of these postings, only after searching around a bit, scrolling down, and looking at the right side of the screen do you see that “This schedule has closed.” There is no other way to tell that the deadline for the application has already passed.

Oh - but wait! Only after scrolling through four pages of postings sorted by deadline do you come across a helpful bit of information. “Apply by tomorrow.” This is great. However, the site allows you to submit an application up until 11:59 pm on the due date, so you cannot actually tell which applications are still open and have the earliest deadline. While the old site was definitely outdated, at least it was easier to use and displayed key information clearly, rather than making you hunt around for it. Unfortunately, the learnability and efficiency of the site have decreased since it was updated.

[rungeinterfaces-blog]

I can’t believe I didn’t think of this interface to blog about because I too have been using it a lot recently to apply to jobs for next year. It is SO frustrating. I also often find posts that are past the due date, and I’ve also had bad experience with it after submitting an application. All of the positions I have applied for require a couple interviews. After I submit my application, it is labeled as “Interview Requested.” However, JIB never tells you when this status changes. Multiple times a day I go into JIB to each position I have applied for to see if it will let me book a time to interview, meaning that I have been offered an interview, or if it said “not-offered.” I would think that it would be an easy solution for JIB to just send an automated email.

[mani-askari-blog]

I agree with your post. I used to surf that site daily to look for jobs back when i was an undergraduate at brown. After looking at the site today, i must say it has improved its usability and efficiency a lot compared to what it used to look like back in 2013. One particular problem i encountered with this site was the lack of visible notifications when i did receive and interview from a company. After the interested company failed to to get in touch with me through JIB, they decided to call Brown and ask for my email and phone number to contact me. I agree with @rungeinterfaces where he/she mentions the automated email problem. JIB’s interface has caused many confusion and frustration for its users that caused many of my friends to avoid using it all together. Also, i wish there was a way for JIB to sort the jobs/internships based on the candidate’s strongest skills and major better than what it does not. i would rather not see three pages of “fasion internship” positions before i get one related to my majot. Great post!

[rungeinterfaces-blog]

Post #2

My next post is about an everyday interface that I have used incorrectly multiple times. At first I thought it was my own fault, but after the 5th time of doing it, I have a feeling it is a design flaw. I am talking about the shower handle on my shower. After I’m done taking a shower I grab my towel and dry off standing in the shower. Often times there is still water dripping from the faucet, so I will yank the handle one more time to make sure it is completely turned off. However, most of the time I actually turn the handle the wrong way and end up turning the faucet back on and spraying myself. What is wrong with this shower? Why do I always instinctively think that on is off? I think my problem with the shower handle is rooted in a design flaw of all shower and sink handles. It is often difficult to know which way is hot and which way is cold, or even how to turn on a shower in the first place. This could be simplified by a more generic design, that is used in all showers and sinks. There could still be different brands and types, but if they all functioned in the same way it would save everyone a lot of confusion. 

[mani-askari-blog]

This is an interesting point that we tend to ignore. You are absolutely right about this. In my opinion, one of the main problem is with the memorability of the shower handle. Which way is hot and which way is cold? which way it turns off or one? The cost of learning to use the design is getting extremely hot/cold water all over you every time! I believe if they marked the surroundings of the shower handle more appropriately, we would not have this problem. For instance, they could have an arrow with a label sating “turn on/off” or “hot/cold”. This way the memorability of the interface would increase and learnability would be easier for the user! 

In case you are talking about Brown’s dorm showers, it is also Brown’s fault for being ignorant and frugal about one of the most important utilities they provide for it’s students! I hope they read this post :)

Good Post!

[mani-askari-blog]

Post#3

Instagram! what an amazing mobile app we all use! However, me and many other folks are annoyed by the fact that you cannot swipe through friend’s photos. In order to navigate through one’s photos, you need to navigate back and forth within the friend’s album. The back button is on the farthest corner of the screen (from my right thumb) which makes it inefficient and annoying to point and click. The time it takes to navigate through photos would be much less if the back button was placed closer to the thumb or there was a swipe mechanism in the app. Since most other mobile apps train us to swipe through elements in a page to navigate, the learnability and memorability of Instagram is also suffering from bad user interface design. Maybe applying Fitt’s law would help this application to place the relevant components closer to each other.