Tagged: ux Toggle Comment Threads | Keyboard Shortcuts

  • Erik-Silver Toomere 11:52 on September 7, 2011 Permalink |
    Tags: oldskool, , , ux, windows   

    What I know that I can do Softcore… 

    What I know that I can do:

    • Softcore IT support (my mom is a frequent client)
    • Basic HTML
    • Basic CSS
    • General annoyance

    What I believe I can do:

    • Mediumcore IT support (w/ Google)
    • Bit more complicated HTML

    What I am miserable at:

    • PHP
    • CSS
    • Databasae
     
  • Taavi 11:06 on May 17, 2011 Permalink |
    Tags: ux   

    UX 

    INDEX (Visible to all)

    • Logged_in=true -> Home page (if the user has logged in he wants to see the most important info available which is on home page)
    • Logged_in=false -> Login page (if the user has not logged in he wants to log in thus he sees forms to log in)

    HOME (Visible to logged in users)

    • Pictures of 4 top rated foods (the user wants to see the foods that other like to make a choice if he likes the same or not)
    • Pictures of 4 recently rated foods (To get immediate feedback of others’ users thoughts and share their own opinion)
    • Access to fridge (possibly a huge link which cannot be missed, because it is the place where the user can get the full overview of the ingredients)
    • Links to Profile page and Log Out link (these are not so important links, meant for the user to get info about himself (not really necessary but people like to view themselves) and log out is necessary for people to leave the page but it is small because we want to keep them on the site)

    FOOD (Visible to logged in users)

    • Huge picture of food (the purpose of this is for the user to get a visual overview of what he is rating)
    • Rating radios (on the top just below the name to be read immediately and to make the rating process as fast as possible)
    • Other info about the food : (quantity, rating, expires) (not necessary for average user but needed in order for the user to get feedback)
    • Links to Profile page and Log Out link (these are not so important links, meant for the user to get info about himself (not really necessary but people like to view themselves) and log out is necessary for people to leave the page but it is small because we want to keep them on the site)
    • Also there is an option to get to the home page if one clicks on the name of the site

    PROFILE (Visible to logged in users)

    • Pictures of 4 last rated foods by the user (the user wants to see the foods that he has rated recently to know what others have thought about the food)
    • Pictures of 4 top rated foods by the user (the user wants to know what he likes the most to see if others also like them)
    • Pictures of 4 least rated foods by the user (the user wants to know what he likes the least to see if others also dont like them)
    • Statistics (ratings, avg. Rating, last login) (To know how active he has been)
      • Small link to fridge (to get access to the overview which is less important than to rate foods)
      • Small log out link (necessary for user not for us)

    FRIDGE (Visible to logged in users)

    • Table of all foods in the fridge (foods ordered in the table by the expiration date)(has links to view foods, if user is MOTHER then there is an option to add foods and to edit the existing foods if some of them have been consumed)
    • Search box (in order to filter the table  so the user can find the foods he or she likes)
    • Links to Profile page and Log Out link (these are not so important links, meant for the user to get info about himself (not really necessary but people like to view themselves) and log out is necessary for people to leave the page but it is small because we want to keep them on the site)

    REGISTER (Visible to all)

    • Form
      • Username (needed for identification)
      • Password (needed for identification)
      • Confirm password (needed for adequate password)
      • E-mail (needed for )
    • Register button (takes the user to confirmation page (Registered page) given that data provided is correct)
    • Small link to Login Screen in the corner, if the user made a miss click and cannot find back button in the browser)

    REGISTERED (Visible to those completed the register form)

    • Confirmation text about the registration process
    • Double links to Login Screen (user wants to get to login page to login to the site to start rating)

    LOGIN (Visible to all)

    • Form
      • Username (needed for identification)
      • Password (needed for identification)
    • Go button (if user clicks it he can log in provided that username and password are correct) (he is taken to the Home page, if data provided is incorrect a message about it will appear)
    • Register button (if user clicks it he will be taken to the Register page where he can register to the site)
     
  • Sander 10:16 on May 17, 2011 Permalink |
    Tags: ux   

    Ratemyfood com The aim of the website is… 

     

    Ratemyfood.com
    The aim of the website is to create a social hub, where people can give ratings to food. In addition, the site will provide a simple and effective way for people to catalog the foods in their fridge and keep track of their expiration dates.

    Home page

     

    • This is the main page which the user will see when opening the ratemyfood page on the internet. On this page, there are be updates about the user or the user’s friends.The names of people and foods are both clickable and both lead to separate user and food pages.
    • The home page also features a login box.
    • If the user is logged out, the site will only show the home page, only with some random updates from popular users, like Ashton Kutcher or Kim Kardashian.
    • There is also a sidebar menu, which leads to the other pages, namely friends and ratings. ALSO CLICKABLE!

     

    Friends page

    • Table of  Friends
    • When a name is clicked, a second form pops up with additional info and profile picture
    • Link takes user to a page with the friend’s food and ratings

     

     

    Ratings page

    • Table with the different foods
    • Ratings
    • Ability to add ratings
    • Expiration dates of foods
     
  • Silver 19:06 on May 16, 2011 Permalink |
    Tags: ux   

    The aim The aim of the webpage is… 

    The aim

    The aim of the webpage is to serve as a social network, where people can create and rate fridges(or anything else for that matter).

    Home

    Since the homepage is set to be the guiding page for the whole website, it is designed so that to
    guide the user to various actions.

    The underlined “RateMyFood.com” serves as a stationary home button.

    The user can have a look at the most popular fridges, according to user ratings, the default is that 3 of the most popular will be displayed. The fridges have illustrative pictures attached and are clickable for more information.

    Right under the “most popular fridges” lies the “see all” button.

    One can create his/her own fridge by following a link to “create your own”.

    As a “index file”, the user can log in, register and search for a specific fridge or user.
    In addition: there is a company logo/advertisement, to add visual stimulus.

    Fridge page

    The page the same illustrative picture, that was to be seen in the “home page” / ”see all”. Besides it lies a brief description of the fridge (added by the author), the author and the rating for the page.

    There is a list of products that the author has put to the fridge. They all have ratings, a description and a place where the user can leave comments or read others’.

    Under all the list of fridges lies a “add more” button that will allow the user… wait for it…. add more products (assuming of course that the user wants to add products to his/her own fridge)

    The author page

    In addition to some general information and the picture of the user, one will find a list of fridges created by the user. These fridges serve as virtual links while having general information besides them.
    The “add more” button leads to a page where one can create new fridges (again assuming that the user wants to create a new fridge to his/her own profile)

    See all page

    Straight forward list of all the fridges created created.
    As standardised they have descriptions and ratings for one to keep track more easily.
    For user convenience there is a link to the author of the fridge at the far right(under the author category)

    Create your own (new fridge)

    The user is conveniently given a structure to follow to make the process easier.
    Name of fridge -> brief description -> picture of fridge(can be browsed from the user’s computer)

    Register (create account)

    An ordered list of actions to follow
    Choose username
    type password
    Re-type password
    e-mail
    repeat e-mail
    Sex: (M / W)
    date of birth (chosen from a dropdown list)

    PS: for convenience, the input boxes have placeholders (adds neatness)’

    Right after registration, a message appears notifying that the user has registered and that he/she can now log in.

    Add more products to fridge page

    Simple and understandable
    For convenience there are 2 inputs at the same page, to fasten the process, when one needs to add more than one product to the fridge. (mind that they both do not have to be filled in)

     
    • Joel L 08:09 on May 17, 2011 Permalink | Log in to Reply

      Home – “the default is that 3 of the most popular will be displayed”. How can I change this value? Why?
      Why no rating on home page?

      On the home page, the “create fridge” button is labelled “Create your own”. On the user page, it’s “Add more”. Why are these different? (For the same exact action)

      Account creation – Why repeat e-mail, but not username?

      Why do I have to log in after creating an account? I just typed my new username and password, and now have to type them again?

      Add more products –
      if I add name, description and image for one product, but only add description to second product, what happens if I try to save?

      • Silver 10:22 on May 17, 2011 Permalink | Log in to Reply

        may it be that the amount of fridges displayed is 3.. when one is more interested, one can turn to “see all” (so no need to change).
        The rating on home page is a good idea.. 😀

        “create your own” applies to, when a person has no fridge (the user should be able to make one immediately, thats the aim)
        “Add more” serves as the same, but it’s intended, when one already has a fridge. The “create new” and “add more” are similar because then the user will already be similar with the simple structure of how fridges are created (no need to make a different one)

        The e-mail is to be repeated so to make it more difficult for a unexperienced person to enter a random email. The inportant thing is that the email will serve as a PW recovery gateway.
        As to the username, there is actually no need for one to retype it because they will most likely not be entering anything pointless there as one will be using it to log in afterwards.
        PS: One doesnt have to log in.. its just that when logged in, the user will have advantages (create his/her own fridge and whatnot) If not loged in one can not do that…
        And isn’t the actual purpose of registering to make the user have the capabilities?

        For the fridge to be created, only the name HAS to be added, the description serves as a social thing.

        DO:

        only 1 product add
        logg in after register
        add ratings to main page

        • Joel L 10:34 on May 17, 2011 Permalink | Log in to Reply

          “create new” vs “add more” – I understand. My point was, that if the links have identical functionality (Create a fridge!), they should have the same “name”.

          • Silver 10:39 on May 17, 2011 Permalink | Log in to Reply

            I get your point. The reason i renamed it to “add more” is that by that specific time (when one has registered), one would/should already have a fridge // add more should be as “add new fridge”. // yes, it should be shanged to ” add new fridge”

        • Joel L 10:35 on May 17, 2011 Permalink | Log in to Reply

          Why do I have to log in after creating an account? I just typed my new username and password, and now have to type them again?

          I mean that – if I create an account, why am I not automatically logged in?

          • Silver 10:41 on May 17, 2011 Permalink | Log in to Reply

            because…
            *I keed* The register acts as a create account not a log in.
            The log in will help the user memorise his username / PW whatnot.

        • Joel L 10:41 on May 17, 2011 Permalink | Log in to Reply

          “For the fridge to be created, only the name HAS to be added, the description serves as a social thing.”

          Point was – if I add name+description for one fridge, but no name for other, then what happens after I save? Does the first fridge get created, and I get an error for the second one?
          Does neither get created, and I see an error?

          It’s more complicated to do save-one-show-error-for-other logic, so think about what and why you want to do.

          • Silver 10:46 on May 17, 2011 Permalink | Log in to Reply

            For the fridge to be created, only the name box has to be filled in
            So if you name, describe one and name the other, they will both be created

  • Brent 18:35 on May 16, 2011 Permalink |
    Tags: ux   

    UX 

    The story of the Site…

    • The user arrives at the page
    • If the person does not have a user they can create it when they select the “Create user” link below the “Log in” possibility
    • After creating a user, or if the user logged in via the user log in possibility, the user arrives at the main user page, which is common for every user.
    • Here the user can give “user ratings” to the products that are available for the user

    On a side note: The system sees about 10-20 products max, which the admin can add/change/remove. One patch can be from a day to a week, depending on the admins choice

    • When the user wants to see their previous ratings and/or change them then they can do this if they select the “My ratings” from the user’s personal “User navigation menu”
    • Under “My Settings” the user can see their name( just in case they forgot it) and change their password. Also the user can choose to delete their account there
    • That’s basically it on the average user’s part
    • The user who has the “User with Administrative User abilities” has a longer menu which has a few more features
    • First is the “Users” where the Admin can choose the faith of other users
    • The second is “Food settings” where the admin can control the products, which the other users can rate. Here the Admin can add/delete food. If the admin deletes food here then the food in the other tables(on the main page and in “My ratings”) will also disappear.

    This is basically it

     
    • Joel L 10:27 on May 17, 2011 Permalink | Log in to Reply

      Based on first 4 points, my understanding is:

      I can log in, see a list of my products, and can rate them. Why would I want to rate my products?
      What does “are available for the user” mean?

  • Erik-Silver Toomere 15:42 on May 16, 2011 Permalink |
    Tags: ux   

    UX thingamogig 

    List:

    Login screen:

    • Log in (‘Enter Fridge!’)
    • Create new account (‘Give me a Fridge!’)

    Give me a Fridge:

    • A place to create a new user
      • Main elements (that appear on every page):

        • Header: The ‘Rate my Food’ logo [or rather… text] which brings the user back to the main page
        • Left column: Ad-space
        • Center column: the space that changes when clicking on items in the Navigation [the right column]
        • Right column: Navigation + log out
        • Footer: legal stuff

        User panel:
        Their name:

        • Opens their profile

        Their profile:

        • Display picture + FULL name of the user
        • Access to their Fridge

        Navigation:
        My Fridge:

        • The contents of the user’s Fridge
        • Here they can add food into their Fridge

        Add food:

        • Fill the fields and ‘Add to Fridge!’

        Other Fridges:

        • Access to others’ Fridges
        • Prize if you are the only user

        Do NOT click!:

        • Don’t

        Help:

        • User can get help here, alcoholics anonymous etc.

        Log out:

        • Moves the user to a page which gives them a chance to re-enter their username and password to re-enter their Fridge

        Creative spin:

        Upon reaching the ‘login.html’ the user will experience a great mixture of fear and surprise when coming to the realization that they have reached a top secret science project!

        Then they realize they can get a new ‘Fridge’ via the ‘Give me a Fridge!’ button (demands are VERY effective!).

        Then they reach the the registration site which sadly is unavailable. Bummer, we would have loved you in our social community network type of thing!


        HOWEVER! They will not give up and smash the ‘Open Fridge’ button on the ‘login.html’ page and to their surprise: it works. They are now at the ‘index.php’.

        To their surprise they already appear to have food in their Fridge! AND they can change the ratings! But before carrying on they want to add some food so they click on the text allowing them to do just the thing!

        They arrive on the ‘?page=addfood’ however the ‘Add to Fridge!’ button is broken… shame.

        Now they click on their name. This brings them to their profile, from there they can get back to their Fridge. Amazing!

        They find the ‘Other Fridges’ button and receive a special prize!

        Also they try to add an advert via the ‘Your advert here!’ but that doesn’t work either…

        They now seek ‘Help’ and are probably still sitting there and waiting for the help squad… shame that we made them up!

        This concludes the orientation.

     
c
Compose new post
j
Next post/Next comment
k
Previous post/Previous comment
r
Reply
e
Edit
o
Show/Hide comments
t
Go to top
l
Go to login
h
Show/Hide help
shift + esc
Cancel