Tag: UX

Greenspring Review

Green spring review: layout 1
Effective:
Navigation bar towards the top: black bolded ink is easy to see
Love the logo. Something about it’s simplicity is nice and calming
Submission Guidelines are up there with the navigation bar which promotes people to submit
Search bar being in the top right is easily accessible and gets readers to reach their goal faster
Lots of whitespace: doesn’t feel overcrowded with content

Not effective:
“Welcome to The Greenspring Review” ink is so light I can barely see it
The spring 2020 issue button is so small that I completely missed it and had to look a second time
Books on either side are distracting, although I like the home-y feel. I have more interest in looking at all the books at first
Under Issues, the way “spring 2020” and “fall 2020” is displayed is rather unprofessional. It feels out of place and I feel pressured to click it
Maybe it would be helpful to have a list of authors with several published works here where someone could just click it? I don’t think outsiders know off hand of a couple authors to search up in the first place

Greenspring review: layout 2
Effective:
Having an actual place on the website to submit more work encourages people to submit. If it’s easy and accessible, there is no need for an extra step and this eliminates them.
There is an efficient use of white space. It creates for perfect balance
It’s simple; yet elegant and sophisticated.
The font is interesting and keeps me engaged. It’s different, but not too different to where it is distracting.
I like how the editors chose quotes instead of putting their own bios. It makes it more interesting and unique and maybe they could go somewhere with that; make a quote of the week would be pretty cool

Not effective:
I feel like the ___ is too much. It takes up too much space when the site is first open. Kind of confusing as to what to do / where to go next
The navigation bar is so small at the bottom and it should be placed at the top, because it is important and you want people to click there
The articles on the featured issues page are not hyperlinked. You cannot click it to read more, rather you have to go to the general topic to learn more which is definitely aggravating (for me)
Issues are the only thing with a drop down menu. It doesn’t make much sense to have a dropdown menu for issues if there is none for any of the others.
The header is cropped when click on other parts of the navigational bar. You only see “review” and letters are chopped off at the bottom

Greenspring review: layout 3
Effective:
Design is sleek, draws my attention to where it needs to be and isn’t too distracting
Creates a nice vibe. It feels current and inviting as well
The blue text here and there really makes it for me. It is appropriate and certainly a nice touch
The navigation bar is clear and easy to see, and spatially is placed perfectly. It fits so well where it is
Love the use of pictures when you look under “issues” for the spring and fall. It’s a nice touch and adds another element

Not effective:
Under issues when you have the choice of spring or fall, I wanted to click on the words themselves to go there but instead it was just the picture. This was a bit confusing: maybe link both?
Where it says “Follow my blog” and ask for an email submission, what / who’s blog is it? Should maybe be more specific
On the right side, the feature bar is at the bottom to where one sees the Facebook posts first. I had to scroll down to look for it, and by having it toward the top, it could become more effective and help people achieve their goal
On the submission page, the guidelines are below where you submit it, so you would submit it first maybe before looking for the guidelines. They aren’t organized in an easy fashion either.
Game Jam is the first thing I see on the website. It would be nice to see the featured articles or something, moreso what it actually is instead of advertising for something else

UX/UI

Team 1

Likes:

    • The Greenspring Review logo with the year it was established
    • The link to the Spring 2020 magazine is the first thing you see
    • The search bar
    • The event count down
    • I like that all of the menu options are laid out to see

Dislikes:

    • The books on the side
    • The layout of the submission guidelines
    • The About Us page group picture
    • The “Contact us at this email”
    • The Lack of Social media presence

Team 2

Likes:

    • The Greenspring Review logo
    • Featured issues
    • Share the story buttons
    • The Submission section
    • The font that important words are written in like “submit” and “featured issues.”

Dislikes:

    • The large size of the Greenspring Review logo
    • The navigation of scrolling and the logo disappearing
    • The way the magazine’s Issues were organized
    • The quotes on the about page
    • The website is too bright

Team 3

Likes:

    • The linking of social media to the home page
    • The circles for the profile pictures
    • Being able to like post
    • The pictures that accompanied every issue
    • The search bar

Dislikes:

    • The blue font of “The Greenspring Review”
    • The Typewriter image
    • The submission guidelines being under the submission form
    • The pale colors of the website
    • There are no names or information about the team members

Overall, my favorite website was team one’s website because, although the books were overwhelming, the website had personality. I liked the logo especially, I felt like it was both very pleasing to look at and entertaining but professional. I also liked the message behind the oak leaf. I like that the website was very functional as well. The platform was nice. However, there are a lot of things from Team three that I feel would benefit team one such as the use of pictures to accompany the issues and post, the circle format around the pictures of the team, and the ability to “like” post which I feel like is very important. Also, the emphasis on social media was nice. What I liked from team two was the idea of having featured work being the first thing you see.

UX/UI Experience List Ranking of The Greenspring Review Proposals

Team 1: https://thegreenspringreview.art.blog/

Effective:

  1. The logo with the oak leaf is very creative. It creates a sophisticated professional look but welcoming page for the homepage.
  2. I like the idea of a “featured piece” from the latest issue of the magazine. It creates a constant viewer due the sheer similarity to other websites/magazines.
  3.  The search bar in the right middle of the front end allows for users to quick-search specific topics of which may be to their interest.
  4. The event planner widget that is within the website lets users stay in touch with Stevenson events.
  5. The submission page is concise and informs the user of what goods can and cannot be submitted for posting. It may be a little lengthy, however its purpose is well served.

Needs Improvement:

  1. The book background limits the users understanding of what the Greenspring Review has in terms of its content. Traditional books should be looked away in looking on an online page with content that may entail more than just reading such as videos, art, photography, music, etc.
  2. The logo is excellent, especially the font, but the placement and the window of which the logo is within is a bit small and misplaced. Though expressed in another potential version of the websites, I think that the idea of using this logo in scrollax form would serve the websites best interest in whatever version ends up to be taken.
  3. In terms of the “Issues” tab on the navigation bar, I believe that the semester and year of each issue should be in a drop-down menu of which would make the “issues” page that the drop-down is attached to much more organized.
  4. I think that the social media links are among the most important resources for the website for users to constantly connected to the information in the magazine. I think reconsidering the placement of the social media widget to even making it have its own section in the navigation bar could prove beneficial for users to constantly be reminded about the social media aspect of the blog.
  5. I believe Hick’s Law (essentially the phrase “less is more”) should be applied here with the detail to the featured piece. The additional text other than the potential title could create unwanted clutter of which the user may not find as visually pleasing.

Team 2: https://jennaaye.wordpress.com

Effective:

  1. I love the visuals on the home page. The homepage with the header that covers the front image, or the implementation of scrollax is a great means to possibly position featured stories on The Greenspring Review.
  2. Though the header moves from the middle of the page to the top, the fact that the bar doesn’t disappear entirely lets users not have to scroll to the very top of the page.
  3. I like how there is an archives option within the “Issues” tab of which allows the user to access older information.
  4. The approach of the website is logistic. The whole site is the literary magazine and there is no option for Spring 2019 or Fall 2018 and so on. I believe this allows the user easier accessibility to access the contents of the website.
  5. The simple colored background is appealing to the eye, however, it does not distract the user from the contents of the websites. In addition, the submission page is ideal and should be modeled for future sites.

Needs Improvement:

  1. The font is unbearable and inconsistent. The font in the image behind the navigation bar is different from the subtitles of the genres, which is also different from the font in the navigation bar. It takes away from the professionalism of the website.
  2. Though for mobile devices makes the gestural mode of operating this site fairly organized, the single column use of space for the website makes the website feel incomplete in terms of the arrangement for desktop users.
  3. I understand the logo was meant to be ambiguous, however, I think the logo should be reexamined.
  4. There’s not much of a homepage which makes the “issues” tab a bit redundant. By having the categories of the literary site view-able from the homepage, there seems to be no point in redirecting the user through numerous pages. Consider having a featured story followed by other headlines viewed horizontally rather than vertically with other related stories or other important events, postings, media, or Stevenson related news.
  5. Adopt more Stevenson colors. Though the goal is to not feel like a Stevenson website, at the end of the day, this is a Stevenson literary magazine. This should incorporate more darker greens and black coloring (explore using black/white font with the green backing) or maybe even some Maryland colors to give the site a geographic anchor.

Team 3: https://greenspringreview.art.blog/

Effective:

  1. This site does a great job at turning a great deal of information into simple-easy-to-read sections which breaks the information into organized parts on the home page.
  2. The header and the title/logo of the site is centered, instilling a professional look from the start. The dual column view looks good for desktop users and the view for mobile devices is nice as well.
  3. The side navigation bar with the search bar on each page is simple and effective. It provides more options with less effort for the user to search things to search for specific content.
  4. Having the submission box at the top of the submission page is bold but understandable. If The Greenspring Review wants to generate more content off of student work, it would behoove their interests to do this.
  5. I like the idea of the wide image at the header of the page. Though perhaps a different photo, but the reinforcement of the magazine is a nice feature.

Need Improvement:

  1. The font of “The Greenspring Review” looks like little attention was focused on it. Either a traditional-style or modern-style bold font with accents of Stevenson colors (or Stevenson literary magazine colors) would look a bit better.
  2. Having the classic “share this” section for the Facebook, Twitter, and Instagram accounts seems slightly dated and not with the times anymore. Most websites incorporate that information either at the very top of the page in the corner as a simple hyperlink. This may be a beneficial option for the Greenspring Review to get more student exposure of the content within the site by making it easier to share information.
  3. The website is a little bland in terms of the color and background. The pattern is simple, however there are no accented colors to make essential information pop out for users to be more drawn to the site.
  4. There are limited options in terms of the places to put additional forms of information such as short stories.
  5. The accessibility to older editions is fairly limited as only two semesters are able to be seen.

Task Analysis in the Greenspring Review (UI/UX Article)

UI defines anything that a user may interact with on a digital screen. UI has been around since the 1980’s, and has since become more complex in nature. Actions that previously required manual inputs can now be done at the click of a button. UI evolved to fit many different types of technologies: phones, watches, tablets and more. UX, which stands for user experience, encompasses all aspects of a product. According to Peter Moreville, your product should be usable, useful, findable, credible, desirable, accessible and valuable.

With this in mind, The Greenspring Review should consider Task Analysis in their structure. Task analysis helps teams discover how they arrived at a certain conclusion. This is extremely useful, as it can make other aspects a lot more clear. It can also allow alternatives to get more room to shine, as this sort of basic questioning is often forgone. There are many different ways to perform Task Analysis, but they accomplish the same goals. Task Analyses cover every option available to you, discover how events occur, sees if desired outcome is more easily achievable and look at alternative goals.

There are two parts of Task Analysis that The Greenspring Review should look: desired and expected outcome. Expected outcome describes what the user thinks is the likely path, while the desired is the path that they want to use. The Greenspring Review needs to keep this in mind for ease of use. By creating UI and designs that are both desired and expected, The Greenspring Review could create something that is truly intuitive. However, it is important to recognize that a perfect design is usually not possible or feasible. Instead, pick the path that is most functional and fits the site’s design philosophy.

Task Analysis also makes something else clear: what angles/designs/questions will NOT work. While Task Analysis can break down the layers of dilemmas that seem simple on the surface, it can also open doors that have no business being open. Some issues, like figuring out why certain people would prefer certain page orders (alphabetical, by popularity, etc.), are best left unsolved. Not only is the work required significant for such a small issue, but these wants are always subject to change. The relevance of the change is also noteworthy, as functions that are essentially useless would act as a waste of space. However, useful user research, like a well put together student survey, would help lead The Greenspring Review in the right direction.

Sources:

Tarik, and Rick Dzekman. “Why Most UX Projects Could Use Task Analysis.” Medium, UX Collective, 16 Dec. 2019, uxdesign.cc/most-ux-projects-could-use-task-analysis-7244e8cf9916.

“UI vs. UX: What’s the Difference?” UserTesting Blog, 19 Nov. 2018, www.usertesting.com/blog/ui-vs-ux/.

7 Psychological Principles for better UX

Tyrkiel, Kalina. “7 Psychological Principles for better UX.” Livesession, https://livesession.io/blog/7-psychological-principles-for-better-ux/. Accessed 19 February 2020.

This article is about how you can use psychology as a tool to bettering or perfecting your website to engage and lead to a positive experience for the user. The information that I didn’t know prior to reading this article where the different laws of psychology such as Jakob’s Law, Principle of Least Effort, Law of figure/ground, Hick’s Law, and Serial Position Effect. Kalina Tyrkiel explains some of the basic areas of psychology, the laws within them and how using/practicing them can benefit your website. What I definitely want to take with me to apply to the redesign of the Greenspring Review is Jakob’s Law which is “don’t fix anything that isn’t broken”. There is a unofficial “standard” for websites that many use, changing it to something completely different will lead to confusion the user.

Article Summary

Braga, Caio. “Rendering Intentionality.” Medium, UX Collective, 16 Jan. 2020, uxdesign.cc/rendering-intentionality-1a57df40b585.

This article focuses on how adding new features to a product isn’t always a good thing. After a while of continuously adding new features, the product will have a hard time meeting its initial purpose. Users may have a difficult time with the unnecessary features and won’t be able to use the product in an efficient manner. By focusing on its intended purpose and keeping it simplistic, the product is more useful for the user.

From this article, I learned that the function of the product is something that needs to be prioritized. I also learned that additional features may look nicer and seem more appealing, but they can be a hindrance for users and have a negative impact on the overall product.

I intend to use the knowledge that I have acquired in the redesign of the Greenspring Review. I plan to utilize the idea that simplicity is sometimes better. When redesigning the Greenspring Review, I also plan to focus on the functionality of the website instead of adding unnecessary features.

 

7 Psychological Principles for Better UX Annotated Summary

“7 Psychological Principles for Better UX.” LiveSession, https://livesession.io/blog/7-psychological-principles-for-better-ux. Accessed 18 Feb. 2020.

 

Cognitive psychology takes other mental processes into account and researches attention, perception and problem solving. For example, Miller’s Law states that the average person is limited to about 7 pieces of information. This is one of the many important aspects of improving user experience. UX designers may keep that in mind with tab amounts, page links, etc. In addition, Gestalt states that the whole is more than the sum of the parts. This field of psychology explores how people perceive objects, as well as how they simplify complex images, such as the law of proximity. Almost all Gestalt laws can be applied to UX design. With Jakob’s Law, your users already know how to interact with other websites. Why would you ask them to change their habits? If your site works like other sites they know, they won’t need to learn how to use it – they’ll know right away. The principal of least interest is self-explanatory, but requires the users to work with the interfaces with as little effort as possible. Other factors such as the law of similarity, Hick’s Law (less is more) and serial position effect are key in creating an engaging webpage for users to explore. This is all applicable characteristics that I hope to incorporate in our process of redesigning the Greenspring Review.

UX Article Summary

O’Haire, Wes. “Mental Models for Designers.” Dropbox Design, https://dropbox.design/article/mental-models-for-designers. Accessed 19 Feb. 2020.

In O’Haire’s article she discusses seven mental models that she uses to help her and other designers solve problems, make decisions, and communicate more effectively and efficiently. She has three models for problem solving which are “First principles”, “Inversion”, and “Abstraction laddering”. In first principle, you focus on creating a problem statement and then break everything down into fundamental parts so that you can analysis those parts in hopes of creating a solution. With inverse, designers should focus on coming up with not only good solutions, but bad solutions as well. This way they can understand how to avoid those bad outcomes. And with abstraction laddering the designer will start with the initial problem statement, then ask a “how” question to create concrete statement, and then a “why” question to create an abstract statement. They can get the designer to think about the problem in different ways, therefore coming up with different solutions. O’Hiare’s models for decision making are the “Hard decision” model and “Confidence decides speed vs. quality”. She uses these models to compare her possible decisions and then to decide if she needs to focus on speed or quality. And lastly, her two models for communicating are the “What, so what, now what?” model and the “Diamond” model. With “What, so what, now what?” designers communicate to their team the “what” as in what will be done, the “so what” as in the why it should be done, and the “now what” explaining the next steps of the process. The Diamond model is a way to more elaborately explain you information and creates a format of how you should communicate it. Overall, these models help designers better organize their thoughts and ideas, evaluate their solutions, pick the best one, and communicate everything more clearly.

I found the quality of this information reliable and helpful. Each model was explained in an efficient way and the importance of each model was known. Not only that, but by giving multiple models, designers can choose the model that would be most efficient in that moment. While this article gave a general overview of each model, O’Haire also provided links to other pages that went into more detail of each of the seven models. However, for me the overview was detailed enough for me to get the big picture of it and how it can be helpful.

I picked this article because I have never done a project like this, so for me I didn’t even know where to begin, or where I will begin. I saw the title and thought maybe this could help me organize my thoughts better when the time comes, and it most certainly did. This article gave me a good idea of where I should start when it comes time to redesign the Greenspring Review. I can first identify the problem with it, brain storms solutions, good and bad, and then communicate this with my teacher and classmates. Maybe once that is figured out I will feel like I have a plan in designing it, rather than just going in and doing it on a whim. I feel with any project it is always important to start with the “why” of it, the reason we are here, and the discover the problems that exist.

 

“3 Practical Tips for Product Builders When Designing in an Era of Digital Exhaustion.” Summary

Li, Jacky. “3 Practical Tips for Product Builders When Designing in an Era of Digital Exhaustion.” Medium, UX Collective, 11 Jan. 2020, uxdesign.cc/3-practical-tips-for-product-builders-when-designing-in-an-era-of-digital-exhaustion-47131d933baa.

This article begins with a graph that shows the number one reason why people uninstall mobile apps is because of annoying notifications. It then goes into saying how as a product builder, a successful product is able to stand out from all the noise, and shares three tips about designing for digital wellbeing. The first tip mentioned is “Knowing the current landscape of our mental capacity.” Meaning it is important to think about your target audience’s cognitive capacity in order to make a product that people will continue to use that can blend well  into their daily routine. Tip number two is behavioural design. One way of making an impactful product is using the “Maintain/shift/inspire” framework. This can be done by maintaining a user’s behavior and updating something that will influence users to shift their behavior into doing something else and lasty to inspire users to sustain this way. The last tip the article provides is “The emotional piggy bank.” This serves as a way to empathize with users in a deeper way than interviews and field research. The piggy bank is a way for the builder and user to gain empathy for each other through meaningful conversations that build a deep relationship. The article then ends with two quotes: 

“Each year more than 30,000 new consumer products are launched and 80% of them fail.” — Clayton Christensen

“And out of the $4 trillion global technology spend that does successfully make it to production, “at least 67% of those efforts are either scrapped, or end up being under whelming with low-to-negative ROI.” — Gianni Giacomelli

The three tips, and more from this article helped me understand a few ways to create a better user experience for digital media. 

 

Rendering Intentionality

Caio Braga’s article titled “Rendering intentionality” is about how designers can lose focus on a product’s original purpose. As a result, its attraction to users is diluted as the product becomes “more complex and less meaningful”(uxdesign.cc). According to Braga, teams who are rewarded for adding features to a product can feel like failures for removing one (uxdesign.cc). According to him, great products do less but are better, using Tonic’s new login process as an example. In this case, going a different route would have made the product more complex but in the end making the login simpler for the user is what made it successful. Overall, this is the most valuable thing I learned through the article. Once products start doing things they are not initially designed to do, their success and overall interest dies down. The most intriguing statement in the article was “being intentional about our designs means knowing that our job is to solve users needs, not to keep developers busy” (uxdesign.cc). This statement can be applied to all products and designs, especially with our redesign of the Greenspring Review. Making sure ideas and intentions do not get lost are what determines whether or not anything is successful. Purpose is the basis of prosperity as examined in the article.

“Rendering Intentionality”. Medium, 2020, https://uxdesign.cc/rendering-intentionality-1a57df40b585. Accessed 17 Feb 2020.