Popular Post Fluttezuhher Posted August 10, 2019 Popular Post Share Posted August 10, 2019 (edited) Let me start off by saying, if any of this is against the rules or terms of service, let me know and I will take the POC down. Ok so here it goes. I personally think that PSN profiles is a great service. It has a great community, looks really great UI wise, has a lot of functionality but... it lacks mobile support. By which I mean the website is pretty much useless when you try to view it on a mobile device. This got me thinking about how PSN profiles could improve on this. I'm a full time PHP back-end developer and now in the progress of learning React (A JavaScript library for building user interfaces). I was trying to search a good use case for a first project to develop my React skill set. That's how I came to the PSN Profiles mobile / app use case. After many hours of programming and copy / pasting data from my own PSN profile, I came up with a working POC. This POC contains only the profile view and the obtained trophies per game I played. I choose to develop this in React along with the Material-UI library. As I'm not a designer I wanted the UI part to be "easy" and lightweight, but still have a professional look. I'm aware that there are still a lot of improvements to be made, but hey, that's why it is a proof of concept right? You can view the POC at http://psnprofiles.robiningelbrecht.be/. I made this because I want to help PSN profiles to get to a "next level". What do you guys think? Please go easy on me EDIT: MaxieM0us3 pointed out that Sly already made mock-ups for a mobile app a few years back. Maybe I should try to base the POC on these as they are more compact than the current design. EDIT 2: I took your feedback to heart and switched the cards with list items. Everything seems to be more compact now: https://psnprofiles-lists.robiningelbrecht.be/ EDIT 3: I managed to implement PWA (Progressive web app) functionality. Which basically means you can install this web page as a near native app on your phone. When visiting https://psnprofiles-lists.robiningelbrecht.be/ you should get a "Add PSN Profiles to your homescreen" message (see screenshot below). If you do this, the web page will be installed is an app and can even be used when there is no internet connection available. Again a step forward Again, if any of this is against the rules or terms of service, let me know and I will take the POC down. Edited August 11, 2019 by Fluttezuhher 10 Link to comment Share on other sites More sharing options...
thefourfoldroot Posted August 10, 2019 Share Posted August 10, 2019 (edited) Honestly, I have no problem with the site and I only ever view it on mobile. All you have to do is zoom in. On your design. It's a pain having to scroll down honestly, it's more user friendly having the list in the way it is now, even when viewing on mobile. Good effort though, I wouldn't have the first idea how to start such a thing. Edited August 10, 2019 by thefourfoldroot 1 Link to comment Share on other sites More sharing options...
DaivRules Posted August 10, 2019 Share Posted August 10, 2019 I use the site 95% on mobile and don’t have any problems doing anything without trouble. When you switch between landscape and profile in safari on iOS, there is a huge discrepancy between data displayed at the top of the profile. Looks like a good start, good luck as you take it past Proof of Concept and make progress for what you’re looking to get out of an app! Link to comment Share on other sites More sharing options...
BeautifulTorment Posted August 10, 2019 Share Posted August 10, 2019 Everything is way too big for my liking. Brutal honesty: it looks like one of those phone things you get for your grandparents with massive buttons and icons. I like how on PSNP I can see a lot of information at once without having to scroll for hours. Link to comment Share on other sites More sharing options...
Fluttezuhher Posted August 10, 2019 Author Share Posted August 10, 2019 (edited) 21 minutes ago, DaivRules said: I use the site 95% on mobile and don’t have any problems doing anything without trouble. When you switch between landscape and profile in safari on iOS, there is a huge discrepancy between data displayed at the top of the profile. Looks like a good start, good luck as you take it past Proof of Concept and make progress for what you’re looking to get out of an app! Honestly, I'm not looking for anything. Just wanted to share my thoughts about the mobile version of PSN profiles, but clearly you like it the way it is . Which I understand. I, on the other hand, don't like it. Aside from that... I learned a bunch while creating this POC. In this post I also wanted to share my appreciation for PSN profiles, otherwise I wouldn't have put in the time to create this. Anyway, thanks for your feedback Edited August 10, 2019 by Fluttezuhher 2 Link to comment Share on other sites More sharing options...
bjenn_x Posted August 10, 2019 Share Posted August 10, 2019 First of all, if this is your first attempt at a react site then kudos! Seems like you're on the right track. I'm a full-time JS/.NET app developer and I have a bit of experience with material design and have even contributed to google's official react component library. Material components are design as touch first which is why there is a lot of padding and whitespace in all the components. This doesn't lend itself well to sites which are data heavy like this one. You'll almost always end up in a situation where you force the user to either scroll a lot or zoom in and out. As a tip though, there should be a `dense` version of most components which will half the padding, giving you more room to play with. Also I would probably have used a list component rather than cards ? Good luck! 3 Link to comment Share on other sites More sharing options...
Fluttezuhher Posted August 10, 2019 Author Share Posted August 10, 2019 42 minutes ago, bjenn_x said: First of all, if this is your first attempt at a react site then kudos! Seems like you're on the right track. I'm a full-time JS/.NET app developer and I have a bit of experience with material design and have even contributed to google's official react component library. Material components are design as touch first which is why there is a lot of padding and whitespace in all the components. This doesn't lend itself well to sites which are data heavy like this one. You'll almost always end up in a situation where you force the user to either scroll a lot or zoom in and out. As a tip though, there should be a `dense` version of most components which will half the padding, giving you more room to play with. Also I would probably have used a list component rather than cards Good luck! This is my first react project, but I have almost 10 years of developer experience in Drupal and PHP... so picking up React wasn't that hard. Thanks for the feedback :)! 1 Link to comment Share on other sites More sharing options...
LaxmiNarayanan Posted August 10, 2019 Share Posted August 10, 2019 I can understand the problem faced by the OP as I too face it. I guess OP still uses a small 5" phone like me. When we zoom enough to make stuff readable, we have to constantly keep scrolling from left to right. The remaining majority who have no problem with their mobile devices must most probably be using larger phones. I can vouch that a mobile optimized site is desirable. Link to comment Share on other sites More sharing options...
DaivRules Posted August 10, 2019 Share Posted August 10, 2019 48 minutes ago, LaxmiNarayanan said: I can understand the problem faced by the OP as I too face it. I guess OP still uses a small 5" phone like me. When we zoom enough to make stuff readable, we have to constantly keep scrolling from left to right. The remaining majority who have no problem with their mobile devices must most probably be using larger phones. I can vouch that a mobile optimized site is desirable. I’m using a 4.7” screen. I do spend more time in the forums, where it’s all optimized. I don’t spend a ton of time looking at trophy profiles but I can understand why people would like that part of the site optimized for mobile. Link to comment Share on other sites More sharing options...
Beyondthegrave07 Posted August 10, 2019 Share Posted August 10, 2019 Not bad, but I agree with too much scrolling, and everything being too big as you can only see a couple of games at a time. Though if you could add options to filter or search for games, that'd help a bit. It'd also be cool to add in stats or somehow incorporate the boosting sessions. Easier said than done, I'm sure! It does look pretty though. You are definitely on the right track. I don't want you to think that I am just being negative or over critical. People take feedback a different way. Link to comment Share on other sites More sharing options...
Maxie_M0us3 Posted August 10, 2019 Share Posted August 10, 2019 This is a first attempt, keep going. however, the icons feel too big, considering that my phone screen is an iPhone SE. Would you try to have an interface like this concept by Sly here, but improve it? Link to comment Share on other sites More sharing options...
Fluttezuhher Posted August 10, 2019 Author Share Posted August 10, 2019 (edited) 46 minutes ago, MaxieM0us3 said: This is a first attempt, keep going. however, the icons feel too big, considering that my phone screen is an iPhone SE. Would you try to have an interface like this concept by Sly here, but improve it? These mock-ups by Sly look really great and are really compact indeed! Maybe I should try this approach :). Thanks for your feedback! 56 minutes ago, Beyondthegrave07 said: Not bad, but I agree with too much scrolling, and everything being too big as you can only see a couple of games at a time. Though if you could add options to filter or search for games, that'd help a bit. It'd also be cool to add in stats or somehow incorporate the boosting sessions. Easier said than done, I'm sure! It does look pretty though. You are definitely on the right track. I don't want you to think that I am just being negative or over critical. People take feedback a different way. Don't worry, I appreciate your constructive feedback! Not over critical at all! Edited August 10, 2019 by Fluttezuhher 3 Link to comment Share on other sites More sharing options...
Fluttezuhher Posted August 10, 2019 Author Share Posted August 10, 2019 I took all of your your feedback to heart and switched the cards with list items. Everything seems to be more compact now: http://psnprofiles-lists.robiningelbrecht.be/ Let me know what you think. 4 Link to comment Share on other sites More sharing options...
Fluttezuhher Posted August 11, 2019 Author Share Posted August 11, 2019 (edited) So, the next step is to try to register this app as a PWA (Progressive web app). This will allow you to load the app even when you have no internet connection. This approach mimics a native mobile app with the advantage of not having to code a separate IOS and Android app. Keep you guys updated Edited August 11, 2019 by Fluttezuhher Link to comment Share on other sites More sharing options...
ProfBambam55 Posted August 11, 2019 Share Posted August 11, 2019 I use this site on mobile roughly 99.99% of the time...i'll find myself accessing it on pc maybe once every year...it works mostly fine on mobile (a few issues when attempting more complex posting) and looks good... i have to agree with the above opinion of your app seeming like it's aimed at the energetic elderly...everything too big and so much scrolling to see simple data...i think if you're going to attempt something like this, it's gotta beat what's already available...imo it does not...i certainly can appreciate all the effort you're putting into your idea but would rather be frank than false...i wish you all the best in developing it further and hope that others find it useful... Link to comment Share on other sites More sharing options...
Fluttezuhher Posted August 11, 2019 Author Share Posted August 11, 2019 3 minutes ago, ProfBambam55 said: I use this site on mobile roughly 99.99% of the time...i'll find myself accessing it on pc maybe once every year...it works mostly fine on mobile (a few issues when attempting more complex posting) and looks good... i have to agree with the above opinion of your app seeming like it's aimed at the energetic elderly...everything too big and so much scrolling to see simple data...i think if you're going to attempt something like this, it's gotta beat what's already available...imo it does not...i certainly can appreciate all the effort you're putting into your idea but would rather be frank than false...i wish you all the best in developing it further and hope that others find it useful... The "energetic elderly" opinion was based on the first version (http://psnprofiles.robiningelbrecht.be/). Based upon your feedback and the mock-ups Sly made a few years back, I have created a second version http://psnprofiles-lists.robiningelbrecht.be/. Don't know which one of the two your feedback is based upon? Link to comment Share on other sites More sharing options...
ProfBambam55 Posted August 11, 2019 Share Posted August 11, 2019 still too big and no option to zoom out...for the record, I didn't like sly's mock ups either... again, the site works fine on mobile imo...for me it's one of those "if it ain't broke, don't try fixing it" type situations...i recognize that perhaps it might look different on other people's phones and that's fine...probably best to get feedback from those who do have issues with the current mobile display... Link to comment Share on other sites More sharing options...
Fluttezuhher Posted August 11, 2019 Author Share Posted August 11, 2019 Just now, ProfBambam55 said: still too big and no option to zoom out...for the record, I didn't like sly's mock ups either... again, the site works fine on mobile imo...for me it's one of those "if it ain't broke, don't try fixing it" type situations...i recognize that perhaps it might look different on other people's phones and that's fine...probably best to get feedback from those who do have issues with the current mobile display... That's the whole purpose of mobile apps and websites... You don't have to zoom in or out, it just works :). I have a 5 inch mobile screen and the current site is just not usable without zooming in and out all the time. That is just not good UX. I totally respect your opinion though Link to comment Share on other sites More sharing options...
ProfBambam55 Posted August 11, 2019 Share Posted August 11, 2019 (edited) here's a question for you: do you think as technology progresses that phone screen sizes will get bigger and/or more functional or smaller and/or less functional?...i'd gamble on the former and call people who don't bother upgrading yet still complain about mobile functionality "dinosaurs"...haha...i wouldn't cater to them if I was trying to turn a profit...but that's just me...and i find it kind of funny that you work in the tech business and seem to have a less than optimal phone... edit: also, if I had to choose between seeing more relevant data on screen and zooming in/out on it a bit vs limited data on screen and having to scroll down past irrelevant data to access relevant data each time I use psnp, I'd also choose the former... Edited August 11, 2019 by ProfBambam55 Link to comment Share on other sites More sharing options...
Fluttezuhher Posted August 11, 2019 Author Share Posted August 11, 2019 (edited) Unfortunately, professional web applications have to support all screen sizes. Not just the ones you like. Also, bigger does not equal more functional and visa versa. Secondly, if you think that majority of the people have big ass expensive phones, you are totally wrong. The mobile industry keeps producing, in your words, "Dinosaurs" because they are tremendously popular in third world countries, which count for a huge amount of the total population. I don't think you really understand what mobile design is. Like I said before, disregarding your opinion that you like zooming in/out, that's just not good UX. Why do you think developers get huge budgets to make sure applications are displayed correctly on all screen sizes? Not because zooming is the way to go. But, that being said, it's clear to me you don't like the mobile design and that's fine. Also I think your question is totally irrelevant for this topic (and makes no sense at all). Good day to you sir! Edited August 11, 2019 by Fluttezuhher 1 Link to comment Share on other sites More sharing options...
grbolivar Posted August 11, 2019 Share Posted August 11, 2019 All that money they make with the Premium and still no mobile/responsive website? It's 2019 guys, every website is responsive. 1 Link to comment Share on other sites More sharing options...
Fluttezuhher Posted August 11, 2019 Author Share Posted August 11, 2019 (edited) I managed to implement PWA (Progressive web app) functionality. Which basically means you can install this web page as a near native app on your phone. When visiting https://psnprofiles-lists.robiningelbrecht.be/ you should get a "Add PSN Profiles to your homescreen" message (see screenshot below). If you do this, the web page will be installed is an app and can even be used when there is no internet connection available. Again a step forward Edited August 11, 2019 by Fluttezuhher Link to comment Share on other sites More sharing options...
ProfBambam55 Posted August 11, 2019 Share Posted August 11, 2019 (edited) I agree that they should support all screen sizes but also be user-friendly and practical...and I totally agree that bigger does not mean more functional hence the and/or...neither do I think most people have biga$$ expensive phones...this list was quite an interesting read...apparently iphones and galaxys rule most of the world...haha...i've also noticed that many of the new phones actually have multiple sizes...a larger and smaller version so I don't necessarily think everyone wants larger phones...random top 10 link...i do think people want technology that is more functional though... you're correct in assuming I don't understand what mobile design is but I do know what works and doesn't work for me and your app doesn't work for me...psnp is tricky because it displays so much data in a small area...i don't think you're on the right track if you substitute lots of scrolling and having to remember what was higher up and/or increased page hopping with a bit of zooming...it's not about big budgets and design, it's practicality and user-friendliness as far as I'm concerned... as far as the relevance of my question, I suppose I tend to be business-minded so I see new ideas/products through the eyes of potential investments...i run a business and staying ahead of the curve is partly what I strive for so considering evolution is always relevant...let's say you have a projection of 3 years to polish up your product, will it still be relevant in 3 years?...if you think so, great and all the power to you...personally, I wouldn't invest in it as I already see it as a step back (the ps app does the same thing but equal or better at this point imo; and I still choose the psnp mobile display with all the zooming over it) from what we currently have and I can only imagine our future phones and apps becoming more functional...you seem to think the future is irrelevant and that's fine...i guess the real question I have is : is an app like the one you're developing unique, in demand, and enough of an improvement to justify the time/effort spent in creating it?...i have no answer to this since I have no idea what your hopes, ambitions, and future plans are or what a majority of people find convenient or useful but surely this thread is a great place to start... getting repetitive and i fear coming across as more of a troll than a constructive critic...a good day to you as well... Edited August 11, 2019 by ProfBambam55 Link to comment Share on other sites More sharing options...
Katt Posted August 11, 2019 Share Posted August 11, 2019 While your design is very good and cute, what I need to improve my mobile experience is a way to read guides without rotating my phone. That would be the best improvement to the site. Link to comment Share on other sites More sharing options...
Fluttezuhher Posted August 11, 2019 Author Share Posted August 11, 2019 (edited) 14 minutes ago, ProfBambam55 said: I agree that they should support all screen sizes but also be user-friendly and practical...and I totally agree that bigger does not mean more functional hence the and/or...neither do I think most people have biga$$ expensive phones...this list was quite an interesting read...apparently iphones and galaxys rule most of the world...haha...i've also noticed that many of the new phones actually have multiple sizes...a larger and smaller version so I don't necessarily think everyone wants larger phones...random top 10 link...i do think people want technology that is more functional though... .... Well I found this answer a lot more constructive than the other ones :). I don't mind you critiquing me... at all. That's what makes people, (software)projects, ... better. It would be dumb to think you have it all figured out and there's no room for improvement. I don't think you are a troll. And again, this is not a project I want people to invest in. PSN Profiles isn't even my property, so I think that would be somewhat illegal . I just wanted point out that the mobile features on this website are non existent and in my opinion these features should be considered. Most people would just open a topic and say "Hey, do this, make that, this sucks". I wanted to put in some work and be constructive, because I love this site and I only want to see it get better. I can understand that you and others as well, are happy with how things are now though Edited August 11, 2019 by Fluttezuhher Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now